用定时器实现进度条

最新推荐文章于 2024-08-05 20:42:07 发布

慧、新

最新推荐文章于 2024-08-05 20:42:07 发布

阅读量877

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：滚动条

本文链接：https://blog.youkuaiyun.com/Endeavor_No1/article/details/77685224

js 专栏收录该内容

54 篇文章

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box {
				width: 400px;
				height: 15px;
				background: #ddd;
				border-radius: 20px;
				box-shadow: 3px 4px 4px #aaa;
				overflow: hidden;
				border: 5px solid #ccc;
				position: relative;
                                margin:300px auto;
                }  

			
			#tiao {
				border-radius: 15px;
				height: 15px;
				background: #FFE66F;
				width: 0px;
			}
			#pp{
				position: absolute;
				left: 0;
				right: 0;
				margin:auto;
				text-align: center;
				font:13px/15px "";
				color:#666
			}
		</style>
	</head>

	<body>
		<!--3, 使用定时器实现进度条, 
		提示:  获取标签对象, 并改变style属性的width值
		var proBar = document.getElementById("progressBar");
		proBar.style.width = barW + "px"; -->
		<div id="box">
			<p id="pp">1</p>
			<div id="tiao"></div>
			
		</div>

		<script>
			var tiao = document.getElementById("tiao");
			var i = 0;
			var timer = setInterval(func, 10)

			func()

			function func() {
				var tiaow = document.getElementById("tiao");
				var pp = document.getElementById("pp");
				if(i < 400) {
					tiaow.style.width = i+"px";
					pp.innerHTML= parseInt(i/4)+"%";
					i++
					
				} else if(i == 400) {
					//console.log("stop")
					pp.innerHTML= parseInt(i/4)+"%";
					clearInterval(timer)
					tiao.style.background = "#8CEA00"
				}
			}
		</script>
	</body>

</html>