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>
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!