Html实现进度条

最新推荐文章于 2025-06-28 22:31:43 发布

机器_

最新推荐文章于 2025-06-28 22:31:43 发布

阅读量1.3w

点赞数

分类专栏： Html

Html 专栏收录该内容

1 篇文章

订阅专栏

源代码如下:

<!doctype html>

<html>

<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">

.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>

</div>
<img src="01.png" >
<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";


},100);
</script>



</body>

</html>