当前位置： 移动技术网 > IT编程>开发语言>JavaScript > javascript 网页进度条简单实例

javascript 网页进度条简单实例

2019年03月24日  | 移动技术网IT编程  | 我要评论

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>

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网