js进度条制造
日期：2014-05-16 浏览次数：20321 次
js进度条制作
<html>
<head>
<title>js进度条的制作</title>
</head>
<body>
<div style="width:300px;border:1px solid #CCC;height:25px;overflow: hidden;">
<div id="progress_div" style="position: relative;left:0px;top:0px;height:25px;width:0px;background:blue"></div>
<div style="position: relative;left:0px;top:-25px;font-size:12px;color:red;width:300px;line-height:25px;height:25px;text-align:center">
正在加载中，进度 <span id="progress_span_count">0</span>/10...
</div>
</div>
</body>
</html>
<script>
var m=0;
function f_test(){
if(m<11){
if(m>0){
f_changeDiv(m);
}
progress_span_count.innerHTML=m;
setTimeout(function(){f_test()},1000);
m++;
}else{
m=1;
progress_div.style.width=0;
f_test();
}
}
var z=0;
function f_changeDiv(m){
if(z<30){
progress_div.style.width=parseInt(progress_div.style.width.replace("px",""))+1;
setTimeout(function(){f_changeDiv()},5);
z++;
}else{
z=0;
}
}
f_test();
</script>
<html>
<head>
<title>js进度条的制作</title>
</head>
<body>
<div style="width:300px;border:1px solid #CCC;height:25px;overflow: hidden;">
<div id="progress_div" style="position: relative;left:0px;top:0px;height:25px;width:0px;background:blue"></div>
<div style="position: relative;left:0px;top:-25px;font-size:12px;color:red;width:300px;line-height:25px;height:25px;text-align:center">
正在加载中，进度 <span id="progress_span_count">0</span>/10...
</div>
</div>
</body>
</html>
<script>
var m=0;
function f_test(){
if(m<11){
if(m>0){
f_changeDiv(m);
}
progress_span_count.innerHTML=m;
setTimeout(function(){f_test()},1000);
m++;
}else{
m=1;
progress_div.style.width=0;
f_test();
}
}
var z=0;
function f_changeDiv(m){
if(z<30){
progress_div.style.width=parseInt(progress_div.style.width.replace("px",""))+1;
setTimeout(function(){f_changeDiv()},5);
z++;
}else{
z=0;
}
}
f_test();
</script>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
