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

效果:实现一个每隔一秒进度增加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>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值