javascript 网页进度条简单实例
javascript网页进度条简单实例
最近学习新的知识，遇到一个小功能网页进度条，发现一篇文章还是不错的，这里记录下，也许能帮助到大家，
实例代码：
<!DOCTYPEhtml>
<html>
<head>
<style>
#box{float:left;width:100%;height:18px;border:1pxsolid;}
#bar{float:left;width:100%;height:18px;border:0px;background:#00f;}
</style>
</head>
<body>
<divid="box">
<divid="bar"></div>
</div>
<scriptlanguage="javascript">
vartotal=6480;//总数
varcurN=4480;//当前值
functionshow()
{
varbox=document.getElementById("box");
varo=document.getElementById("bar");
o.style.width=((curN/total)*200)+'px';//200是外框的宽度
}
show();
</script>
</body>
</html>
取反：
<!DOCTYPEhtml>
<html>
<head>
<style>
#box{float:left;width:200px;height:18px;border:1pxsolid;}
#bar{float:left;width:100%;height:18px;border:0px;background:#00f;}
</style>
</head>
<body>
<divid="box">
<divid="bar"></div>
</div>
<scriptlanguage="javascript">
vartotal=6480;//总数
varcurN=6400;//当前值
varbaseNub=total-curN;
functionshow()
{
varbox=document.getElementById("box");
varo=document.getElementById("bar");
o.style.width=((baseNub/total)*200)+'px';//200是外框的宽度
}
show();
</script>
</body>
</html>
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！