js百分比加载进度条效果
分类:实例代码
分享一段代码实例,它实现了加载进度条效果。
数据能够实时变化,并且进度条以百分比显示,代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> .box { width: 1200px; margin: 100px auto; } .div1 { height: 20px; width: 100px; border: 1px solid gray; padding: 2px; } #div2 { height: 20px; width: 0; background-color: green; position: absolute; } </style> <script> var timer=null; var width=0; function start(){ timer = setTimeout(onChange, 10); } function stop(){ clearInterval(timer); } function onChange(){ if(width==100){ window.clearInterval(timer); }else{ width+=1; document.getElementById("div2").style.width=width+"px"; document.getElementById("div2").innerHTML=Math.round(width)+"%"; timer=setTimeout(onChange,100); } } window.onload = function () { var ostart = document.getElementById("start"); var ostop = document.getElementById("stop"); ostart.onclick = function () { start() } ostop.onclick = function () { stop() } } </script> </head> <body> <div class="box"> <div class="div1"> <div id="div2"></div> </div> <br /> <input id="start" type="button" value="开始" /> <input id="stop" type="button" value="停止" /> </div> </body> </html>
js百分比加载进度条效果,这样的场景在实际项目中还是用的比较多的,关于js百分比加载进度条效果就介绍到这了。
js百分比加载进度条效果属于前端实例代码,有关更多实例代码大家可以查看。