当先锋百科网

首页 1 2 3 4 5 6 7

HTML JS 进度条代码是在Web开发中常常用到的一种功能,能够让用户清晰地了解网页加载的完整程度。下面是一个基础的HTML JS 进度条代码示例:

<style>
#progressbar {
width: 200px;
height: 20px;
border: 1px solid #ccc;
margin: 20px;
position: relative;
}
#progressbar .bar {
position: absolute;
top: 0;
left: 0;
height: 20px;
background: #fc0;
transition: width .2s linear;
}
</style>
<div id="progressbar">
<div class="bar"></div>
</div>
<script>
var progressBar = document.getElementById('progressbar');
var bar = progressBar.getElementsByClassName('bar')[0];
var currentProgress = 0;
var interval = setInterval(function() {
currentProgress += Math.floor(Math.random() * 10);
if (currentProgress >= 100) {
clearInterval(interval);
bar.style.width = '100%';
progressBar.style.display = 'none';
} else {
bar.style.width = currentProgress + '%'; 
}
}, 300);
</script>

代码中,#progressbar是外层容器,.bar是进度条的内部容器,通过设置position属性实现布局;JS部分则通过setInterval函数,每次增加一定数值的currentProgress,并根据增量来更新进度条的宽度bar.style.width,同时在进度达到100%时清除定时器,隐藏进度条。这是一个基本的HTML JS进度条代码示例,可以根据实际需要进行修改和完善。