JavaScript实现一个简单的进度条（有进度含百分比）

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

编程界小明哥

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

阅读量5.7k

点赞数 7

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/dkm123456/article/details/111328588

版权

javascript 专栏收录该内容

78 篇文章 27 订阅

订阅专栏

效果图：

代码：

 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <style>
        *{margin:0;padding:0;}
		.box{
		    width: 300px;
		    height:10px;
		    border:1px solid #9e9e9e;
		}
		.load{
			 width:0px;
			 height:10px;
			 background:#325976;
		}
        </style>
        </head>
        <body>
        	<div style="left:40%;position:absolute;top: 20%;font-size:70px">
        		<div class="box" id="div_box"><div class="load" id="load"></div></div>
        		<span id='result'></span>
        	</div>
			
        </body>
        
<script>
	var speed=110;
	var n=0;
	var result = document.getElementById('result');
	var load = document.getElementById('load');
	var timer = setInterval(function(){
		if(n<=100){
			n+=Math.floor(Math.round(Math.random()*(100-10)+10)/10);// 这里采用随机的两位数来模拟
			if(n>100)n=100;
			result.innerText=n+"%"; 
			load.style.width=n*3+'px';
		}else{
			clearInterval(timer);
		}
	},speed)
</script>
</html>

编程界小明哥

关注

7
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript实现一个简单的进度条（有进度含百分比）

效果图：代码： <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <style> *{margin:0;padding:0;} .box{ width: 300px; height:10px; bo
复制链接

扫一扫