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>
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
热门推荐
10 新人红包祝福语简短精辟
11 幼师给毕业祝福语简短
12 生日高考祝福语妹妹简短
13 下飞机祝福语简短英文
14 元宵发客户祝福语简短
15 爸妈金婚文案祝福语简短
16 新郎朋友红包祝福语简短
17 虎年五一祝福语大全简短
18 出阁宴祝福语姐姐简短