原生js做一個簡單的進度條
阿新 • • 發佈:2018-06-01
-i 隨機數函數 borde setw bubuko 原生 html 進度條 add
用原生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做一個簡單的進度條