流行的一款JS进度条封装类

2020-01-27 13:47:30

字体：大中小

来源：转载

供稿：网友

这是目前比较流行的一款JS进度条封装类，成组显示，多线程执行，每一个都有不同的进度，本进度条样式你可以自己美化一下，这时只是为了演示一种功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">       <html xmlns="http://www.w3.org/1999/xhtml">       <head>       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />       <title>进度条</title>       </head><body>       <div id="ggg"></div>   <div id="allBox" style=" width:500px; margin-top:5px; height:20px; border:#CDCDCD 1px solid;display:inline;overflow:hidden; float:left; position:relative; text-align:center">     <div style="height:16px; background-color:#e0f3fa; border:#ff6600 1px solid; position:absolute; top:1px; left:1px;z-index:1; width:400px"></div>         <strong style=" text-align:center;width:500px; POSITION: absolute; left:0; top:0;Z-INDEX: 2;">正在载入……</strong>       </div>   <div id="Div1" style=" width:200px; margin-top:5px; height:20px; border:#CDCDCD 1px solid;display:inline;overflow:hidden; float:left; position:relative; text-align:center">     <div style="height:16px; background-color:#e0f3fa; border:#ff6600 1px solid; position:absolute; top:1px; left:1px;z-index:1; width:100px"></div>         <strong style=" text-align:center;width:200px; POSITION: absolute; left:0; top:0;Z-INDEX: 2;">正在载入……</strong>       </div>   <script type="text/javascript">   //进度条的封装类    var loadingScroll = {        init : function(boxDiv,Speed){               this.boxId=boxDiv;//外层的id               this.scrollSpeed=Speed || 10;//速度 & 初始速度          },        doScroll : function() {           var scrollWi = 0;//执行时的宽度           var HimalayaN=document.getElementById(this.boxId).getElementsByTagName("div")[0] ;          var HimalayaW=document.getElementById(this.boxId);           var pointW=(HimalayaN.scrollWidth/HimalayaW.scrollWidth)*100;//原始的宽度比例           var doScr=window.setInterval(function() {                scrollWi += 1;                if (scrollWi >= pointW) {                    window.clearInterval(doScr);                } else {                    HimalayaN.style.width = scrollWi + "%";                }            }, this.scrollSpeed);           }       }       loadingScroll.init("allBox", 50);    loadingScroll.doScroll();    loadingScroll.init("Div1");    loadingScroll.doScroll();    </script>   </body>       </html>

上一篇：统计用户在某网页的停留时间

下一篇：只打印网页中的文字

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注