Javascript进度条

最新推荐文章于 2024-07-18 10:24:18 发布

惯性-给力

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量307

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_23013025/article/details/53573362

版权

<!DOCTYPE html>
<html>
<head>
<title>进度条</title>
<meta charset="utf-8">
<style type="text/css">
   .content{
width: 80%;
margin-left:auto;
margin-right: auto;
}
.progress{
width:100%;
height:20px;

border: 1px solid blue;
}
.progress_bar{
width:10%;
height:20px;
margin-top:-16px;
background-color:green;
}
p{
color: red;
}
</style>
<div class="content">
<h2 align="center">开始下载</h2>
<div class="progress">
<div id="progress_bar" class="progress_bar">
<p id="data"></p>
   </div>
</div>
</div>
<script type="text/javascript">
var time=0;
function progress(){
time++;
document.getElementById('data').innerHTML=time+"%";
document.getElementById("progress_bar").style.width=time+'%';
if(time!=100)setTimeout('progress()',100);
   else document.getElementById('data').innerHTML="下载完成。";
}
progress();
</script>
</body>
</html>

惯性-给力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript进度条

进度条 .content{width: 80%;margin-left:auto;margin-right: auto;}.progress{width:100%;height:20px;border: 1px solid blue;}.progress_bar{width:10%;height:20px;margin-top
复制链接

扫一扫