萬盛學電腦網 >> 腳本專題 >> javascript >> javascript實現簡單的進度條
javascript實現簡單的進度條
本文給大家分享2個javascript實現簡單的進度條，一個是個人制作一個是網友實現的，都很不錯，這裡推薦給大家。
示例一：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 <!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，內容如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <!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" id="mainWindow"> <head> <title>無標題頁</title> <script language="javascript"> function SetPorgressBar(pos) { //設置進度條居中 var screenHeight = window["mainWindow"].offsetHeight; var screenWidth = window["mainWindow"].offsetWidth; ProgressBarSide.style.width = Math.round(screenWidth / 2); ProgressBarSide.style.left = Math.round(screenWidth / 4); ProgressBarSide.style.top = Math.round(screenHeight / 2); ProgressBarSide.style.height = "21px"; ProgressBarSide.style.display = ""; //設置進度條百分比 ProgressBar.style.width = pos + "%"; ProgressText.innerHTML = pos + "%"; } //完成後隱藏進度條 function SetCompleted() { ProgressBarSide.style.display = "none"; } </script> </head> <body> <div id="ProgressBarSide" style="position:absolute;height:21x;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none"> <div id="ProgressBar" style="position:absolute;height:21px;width:0%;background-color:#3366FF"></div> <div id="ProgressText" style="position:absolute;height:21px;width:100%;text-align:center"></div> </div> </body> </html>後台代碼，Default.aspx.cs：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved