js控制进度条到达100%跳转界面一 

进度条一般在手机上用到的比较广泛，刚好最近的项目也是一直在做手机站，这个特效是手机端的一个界面，现在我把改成pc端了，进度条的快慢速度和样式可自行调节，改动也是很方便的，不多说，看代码：


 1 <style>
 2     * {
 3         margin: 0;
 4         padding: 0;
 5     }
 6 
 7     html, body {
 8         font-family: arial, "microsoft yahei";
 9         font-size: 14px;
10         background: #c2d7ac;
11     }
12 
13     .progress {
14         width: 300px;
15         height: 30px;
16         margin: auto;;
17         background: #70b4e5;
18         border-radius: 5px;
19         -webkit-box-shadow: inset -2px 0px 2px #3189dd, inset 0px -2px 2px #d4edf9, inset 2px 0px 2px #d4edf9, inset 0px 2px 2px #3189dd;
20         box-shadow: inset -2px 0px 2px #3189dd, inset 0px -2px 2px #d4edf9, inset 2px 0px 2px #d4edf9, inset 0px 2px 2px #3189dd;
21     }
22 
23     .progress_bar {
24         width: 0%;
25         height: 26px;
26         background: url("images/bar.jpg") repeat;
27         background-size: auto 100%;
28         border-radius: 5px;
29         position: relative;
30         left: 3px;
31         right: 3px;
32         top: 2px;
33     }
34 
35     p {
36         width: 300px;
37         text-align: center;
38         font-size: 14px;
39         color: #c20606;
40         position: absolute;
41         top: 98px;
42     }
43 </style>
<body onload="fakeProgress(0, load)">
<div style="height: 120px;"></div>
<div class="progress">
    <div id=load>
        <div class="progress_bar"></div>
        <p>0</p>
    </div>
</div>
 1 <script type="text/javascript">
 2     function setLOAD(v, el) {
 3         var read = (document.all && document.getElementsByTagName);
 4         if (read || document.readyState == "complete")
 5             valueEl = el.children[1];
 6         {
 7             filterEl = el.children[0];
 8             valueEl.innerText = v + "%";
 9             filterEl.style.width = v + "%";
10 
11         }
12     }
13     function fakeProgress(v, el) {
14         if (v > 100)
15             location.href = "begin.html";
16         else {
17             setLOAD(v, el);
18             window.setTimeout("fakeProgress(" + (++v) + ", document.all['" + el.id + "'])", 2000);
19         }
20     }
21 </script>

效果图：

posted @ 2016-08-27 00:15  杜Amy  阅读(4715)  评论(0)  编辑  收藏  举报