javascript 網頁進度條簡單實例
最近學習新的知識,遇到一個小功能網頁進度條,發現一篇文章還是不錯的,這里記錄下,也許能幫助到大家,
實例代碼:
<!DOCTYPE html><html><head><style>#box {float:left;width:100%;height:18px;border:1px solid;}#bar {float:left;width:100%;height:18px;border:0px;background:#00f;}</style></head><body><div id="box"><div id="bar"></div></div><script language="javascript">var total = 6480; //總數var curN = 4480; //當前值function show(){ var box = document.getElementById("box"); var o = document.getElementById("bar"); o.style.width = ((curN / total) * 200) + 'px'; //200是外框的寬度}show();</script></body></html>
取反:
<!DOCTYPE html><html><head><style>#box {float:left;width:200px;height:18px;border:1px solid;}#bar {float:left;width:100%;height:18px;border:0px;background:#00f;}</style></head><body><div id="box"><div id="bar"></div></div><script language="javascript">var total = 6480; //總數var curN = 6400; //當前值var baseNub = total - curN;function show(){ var box = document.getElementById("box"); var o = document.getElementById("bar"); o.style.width = ((baseNub / total) * 200) + 'px'; //200是外框的寬度}show();</script></body></html>
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
新聞熱點
疑難解答