原生js做一个简单的进度条

最新推荐文章于 2024-05-02 09:34:08 发布

bahuanpu8594

最新推荐文章于 2024-05-02 09:34:08 发布

阅读量326

点赞数 1

原文链接：http://www.cnblogs.com/MikePan/p/9123329.html

版权

本文介绍如何使用原生JavaScript和CSS创建一个动态更新的进度条。通过定时器逐步增加进度条宽度，并在达到最大宽度时停止。文章包含完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用原生js做进度条，布局非常简单，一个盒子里放一个span标签，让它的宽度为0，并且转成块元素。

主要用定时器动态增加span的宽度，并且当它的宽度大于父级盒子的宽度的时候停止

效果如下：

一 css如下：

		*{
			margin: 0;
			padding: 0;
		}
			#box{
				width: 500px;
				height: 30px;
				margin: 50px auto;
				overflow: hidden;
				border: 1px solid #CCCCCC;
				border-radius: 15px;
			}
			
			span{
				height: 30px;
				width: 0;
				display: block;
				line-height: 30px;
				background: red;
				text-indent: 250px;
				color: #000;
				
			}
		</style>
	</head>
	<body>
	<div id="box">
		<span id="bar"></span>
	</div>

二 js代码：

	<script>
	//获取dom元素
	var obar=document.getElementById("bar");
	//定义一个定时器，因为后面要清除我们给它命名
		var timer=setInterval(function(){
	//速度为3，匀速，也可以利用随机数函数让速度随机
			var speed=3;
	//设置退出条件，当span的宽度大于盒子超出就清除定时器
			if(obar.offsetWidth>=500){
				clearInterval(timer);
			}else{
	//条件不满足时我们span的宽度为当前宽度加速度
				obar.style.width=speed+obar.offsetWidth+"px"
	//由于浮点数误差，这边我们乘以一百再取整。
				obar.innerHTML=parseInt(obar.offsetWidth/500*100)+"%"
			}
		},30)
		
		
		
		
	</script>

转载于:https://www.cnblogs.com/MikePan/p/9123329.html