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