进度条（js实现）

最新推荐文章于 2024-10-07 09:00:00 发布

尹若轩

最新推荐文章于 2024-10-07 09:00:00 发布

阅读量2.7k

点赞数 1

本文链接：https://blog.csdn.net/yinxiangbing/article/details/42521001

版权

本文探讨了JavaScript中用于实现进度条效果的setTimeout和setInterval方法。通过比较两者之间的区别，阐述如何利用它们创建动态效果。setTimeout一次性执行指定任务，而setInterval会持续调用直到被清除或窗口关闭。在实际应用中，需根据需求选择合适的方法。

摘要由CSDN通过智能技术生成

1.setTimeout和clearTimeout

<html>
<head>
<title>进度条</title>
<style type="text/css"> 
.container{ 
      width:450px; 
      border:1px solid #6C9C2C; 
      height:25px; 
  }
#bar{ 
      background:#95CA0D; 
      float:left;
      height:100%; 
      text-align:center; 
      line-height:150%;
  } 
</style> 
<script type="text/javascript"> 
	function run(){ 
                var bar = document.getElementById("bar");
                var total = document.getElementById("total");
		bar.style.width=parseInt(bar.style.width) + 1 + "%"; 
		total.innerHTML = bar.style.width;
		if(bar.style.width == "100%"){ 
			window.clearTimeout(timeout);
			return;
		}
		var timeout=window.setTimeout("run()",100);
	}
		 
       window.onload = function(){ 
              run();
       } 
</scr