利用JS实现动态进度条效果

最新推荐文章于 2024-08-02 18:20:19 发布

文盗任情

最新推荐文章于 2024-08-02 18:20:19 发布

阅读量2.6w

点赞数 7

文章标签： javascript 动态进度条 CSS HTML

本文链接：https://blog.csdn.net/Qianqianliuliu/article/details/78368546

版权

效果：实现一个每隔一秒进度增加1%，到100%停止的进度条，不同的进度改变进度条的颜色。

一、利用HTML+CSS进行页面布局

注意：1.将进度条变化区域宽度（width）设置为0，再设置一个背景颜色；

2.将移动的进度飞机与显示的百分比设置为相对定位（position：absolute；）。

二、利用JS实现具体功能

1.使用计时器setInterval（function（）{}，1000）让进度条在设置时间增加设置的进度（每计时一次，将进度条的宽度增加1%）；

2.设置限定条件，当进度条的宽度为多少时，改变进度条的背景颜色（element.style.background=red）;动态增加移动飞机和显示数据框，让它们跟着计时器一起动起来；

3.进度到达100%关闭计时器（clearInterval()；）；

三、效果图

四、代码实现

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
body{
background: #f2f2f2;
}
.main{
height: 30px;
width:500px;
background: #787878;
margin:100px auto;
border-radius: 3px;
}
.inner{
height: 20px;
width: 0;
background: #e4a348;
position: relative;
top: 2px;
left: 5px;
border-radius: 2px;
overflow: hidden;
}
.line{
position: relative;
left: 5px;
top: 14px;
width: 490px;
border-top: 3px dashed #fff;
}
img{
position: absolute;
top: 103px;
left: 395px;
}
.data{
height: 24px;
width:43px;
border: 1px solid;
position: absolute;
left: 396px;
top: 65px;
text-align: center;
}
</style>
</head>
<body>
<div class="data"></div>
<div class="main">
<div class="line"></div>
<div class="inner">
</div>
<img src="../images/1.gif" >
</div>
<script type="text/javascript">
var _width =0;
var timer;
timer = setInterval(function(){
_width +=5;
if(_width>150){
document.getElementsByClassName("inner")[0].style.background="#004c8a";
}
if(_width>350){
document.getElementsByClassName("inner")[0].style.background="#cd4c49";
}
if(_width>=490){
clearInterval(timer);
}
document.getElementsByClassName("inner")[0].style.width=_width+"px";
document.getElementsByTagName("img")[0].style.left=395+_width+"px";
var _data = Math.floor((_width/490)*100);
document.getElementsByClassName("data")[0].innerText = _data+"%";
document.getElementsByClassName("data")[0].style.left=396+_width+"px";

},1000/5);
</script>

</body>
</html>