原生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做一个简单的进度条的主要内容,如果未能解决你的问题,请参考以下文章