<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#asd{
width: 400px;
height: 50px;
/*margin-left:100px ;
margin-top: 200px;*/
border:1px solid black;
float: left;
}
#jindutiao{
width: 0;
height: 100%;
background-color: #FF0000;
}
</style>
</head>
<body>
<div id="asd">
<div id="jindutiao"></div>
</div>
<span id="bai" style="display: block;">0%</span>
<input type="button" id="go" value="加载" "ruo()">
</body>
</html>
<script type="text/javascript">
//点击运行
function ruo(){
//进度条初始值为0
var width=0;
// 每隔10毫秒加4px也就是百分之一;
var timing = setInterval(function(){
width=width+4;
//percent百分比
var percent = parseInt(width/400*100);
//判断 进度条是否已满
if(width>=400){
width=400;
window.clearInterval(timing)
}
// 过程中的实时进度
$("jindutiao").style.width = width+"px";
$("bai").innerHTML = percent+"%"
},40)
}
//调用函数
function $(id){
return document.getElementById(id)
}
</script>
版权声明：本文为wuwenjie_1997原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。