js控制进度条到达100%跳转界面一
Posted 杜Amy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
效果图：
以上是关于js控制进度条到达100%跳转界面一的主要内容，如果未能解决你的问题，请参考以下文章