javascript实现简单的进度条

时间：2021-05-26

示例一：

<!doctype html><html><head><meta charset="utf8"><title>Process Bar</title><script>var t;function s(c){ if(c<=100) { val.style.width=c+"%"; percent.innerHTML=c+"%"; btn.disabled=true; btnp.disabled=false; c=c+10; t=setTimeout("s("+c+")",500); } else { clearTimeout(t); btnc.disabled=false; btnp.disabled=true; return; }}function c(){ clearTimeout(t); val.style.width="0px"; percent.innerHTML="0%"; btn.disabled=false; btnc.disabled=true; btnp.disabled=true; btnp.value='Pause';}function p(){ var temp; if('Pause' == btnp.value) { clearTimeout(t); btnp.value='Go on'; btnc.disabled=false; } else { temp=val.style.width; btnp.value='Pause'; var k=parseInt(delEnd(temp)); s(k); btnc.disabled=true; } }function delEnd(str){ var temp=""; for(var i=0; i < str.length-1; i++) { temp=temp+str[i]; } return temp;}</script></head><body><div id="bar" style="width:300px; height:30px; border:solid 1px; float:left;"> <div id="val" style="height:100%; background-color:#03F; width:0px;"></div></div><div id="percent" style="float:left; line-height:30px;">0%</div><div style="clear:both"></div><br /><input id="btn" type="button" value="Start" onClick="s(0)" /><br /><input id="btnc" type="button" value="Clear" onClick="c()" disabled /><br /><input id="btnp" type="button" value="Pause" onClick="p()" disabled /></body></html>

再来分享一个结合.net的

建立一个WEB工程，添加新项->HTML页面，命名为ProgressBar.htm，内容如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://pleted();</script>"; Response.Write(jsBlock); Response.Flush(); } private void Page_Load(object sender, System.EventArgs e) { beginProgress(); for (int i = 1; i <= 100; i++) { setProgress(i); //此处用线程休眠代替实际的操作，如加载数据等 System.Threading.Thread.Sleep(50); } finishProgress(); } }

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章