js进度条

最新推荐文章于 2021-06-01 00:10:07 发布

等待逆袭

最新推荐文章于 2021-06-01 00:10:07 发布

阅读量364

点赞数

分类专栏： js sample 文章标签： javascript function float div

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/hell_liul/article/details/5693830

版权

js sample 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<script language="javascript">
    var currentProgress = 0;
var time;
function begin(){
if (currentProgress == 100) {
   currentProgress = 0;
}
if (time){
   clearTimeout(time);
}
time = window.setTimeout("draw()", 100);
}
function draw() {
currentProgress = currentProgress + 10;
if (currentProgress > 100){
   currentProgress = 100;
}
document.getElementById("inner1").style.width = currentProgress + "%";
document.getElementById("inner1").style.visibility = "visible";
document.getElementById("testProgressText").innerText = (currentProgress + '%');
if (currentProgress == 100)
{
   return;
}
window.setTimeout("draw()", 100);
}
</script>

<body>
<div id="testProgress" style="float:left;width:100px;height:12px;border:2px solid;">
<span id="inner1" style="width:0%;line-height:12px;visibility:hidden;background-color:green;height: 12px;">
</span>
</div>
<div id="testProgressText" style="width:50px;height:12px;float:left;">
</div>
<button οnclick="begin()">Test Here</button>
</body>

关注

0
点赞
踩
0

收藏

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

<br /><script language="javascript"><br /> var currentProgress = 0;<br />var time;<br />function begin(){<br /> if (currentProgress == 100) {<br /> currentProgress = 0;<br /> }<br /> if (time){<br /> clearTimeout(time);<br /> }<br /> time = win
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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