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>
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
您可能感兴趣的文章:
- js实现楼层导航功能
- js获取浏览器和屏幕的各种宽度高度
- 基于JS实现移动端向左滑动出现删除按钮功能
- js实现带简单弹性运动的导航条
- javascript 操作cookies详解及实例
- js实现简易垂直滚动条
- 微信小程序 引用其他js文件实现代码
- Javascript 链式作用域详细介绍
