javascript 网页进度条简单实例

2019-11-19 17:27:03

字体：大中小

来源：转载

供稿：网友

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>

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

上一篇：bootstrap fileinput 插件使用项目总结(经验)

下一篇：详解闭包解决jQuery中AJAX的外部变量问题