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

Posted mikepan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生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实现加载进度条

java 做进度条 ajax实现 js jquery ext 都可以需要具体实现过程和代码 需要读取数据

html+原生js做一个html5视频播放器

原生js移动端可拖动进度条插件

简单的圆形下载进度条

简单实用的进度条加载组件loader.js