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

日期：2022-11-21 ;

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

用原生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>

相关内容

用js写一个网页进度条

一、基本思路

为了让我们编写的网页进度条满足现有需求，又足够轻便，所以使用原生js写一个构造函数，为了见名知义，可以把该函数命名为”Loading”。该函数接收2个参数，分别为arr、callback。其中arr定义图片数组，callback定义执行完成后回调函数。该构造函数内部，遍历图片数组加载图片，每加载完一张图片，修改进度条进度，直至全部加载完成，进度条进度为100%。

二、实现步骤

（1）先搭建好进度条的样子，把html和css写好。