您的位置：首页 > Web前端 > JavaScript

用js写一个简单的进度条

2017-04-26 12:46 302 查看

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="telephone=no,email=no" name="format-detection">
<meta content="yes" name="apple-touch-fullscreen">
<title>进度条</title>
<style>
*{margin:0;padding:0;}
#bar{
width:100%;
height:30px;
background-color:#ccc;
overflow:hidden;
}
#progress{
width:0;
height:30px;
background-color:#b991ef;
}
</style>

</head>

<body>
<div id="bar">
<div id="progress"></div>
</div>

<script>

document.onclick = function(){
var pro=0;//设置进度条的初始值
var proBar = setInterval(function(){
pro++;
document.getElementById("progress").style.width=pro+"%";

if(pro == 100){
clearInterval(proBar);
}
},10);

}

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航