源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

javascript 网页进度条简单实例

  • 时间:2022-01-05 13:55 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:javascript 网页进度条简单实例
[b]javascript 网页进度条简单实例[/b]                最近学习新的知识,遇到一个小功能网页进度条,发现一篇文章还是不错的,这里记录下,也许能帮助到大家, 实例代码:
<!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>
[b]取反:[/b]
<!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>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部