js实现的一个简单的百分比进度条
2015-11-26 15:44
671 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
#box {float:left;width:200px;height:18px;border:1px solid;}
#bar {float:left;width:0px;height:18px;border:0px;background:#green;}
</style>
</head>
<body>
<div id="box">
<div id="bar"></div>
</div>
<script language="javascript">
var total = 100; //总数
var curN = 50; //当前值
function show()
{
var o = document.getElementById("bar");
o.style.width = ((curN / total) * 200) + 'px'; //200是外框的宽度
}
show();
</script>
</body>
</html>
<html>
<head>
<style>
#box {float:left;width:200px;height:18px;border:1px solid;}
#bar {float:left;width:0px;height:18px;border:0px;background:#green;}
</style>
</head>
<body>
<div id="box">
<div id="bar"></div>
</div>
<script language="javascript">
var total = 100; //总数
var curN = 50; //当前值
function show()
{
var o = document.getElementById("bar");
o.style.width = ((curN / total) * 200) + 'px'; //200是外框的宽度
}
show();
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- highChartsjs柱状图
- 理解和使用 JavaScript 中的回调函数
- js检测iframe是否加载完成的方法
- JS 图片点击显示原图片
- 学习JavaScript设计模式(策略模式)
- 深入浅析同源策略和跨域访问
- js 动态创建table并且为table 添加行列
- 一个页面显示多个倒计时
- js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
- 文本框只能输入0-100的数字
- JS版获取最长公共子串的方法
- JS获取浏览器及屏幕高度和宽度等信息
- javascript需要知道的1
- 学习JavaScript设计模式(单例模式)
- javascript bom是什么及bom和dom的区别
- 画扑克牌的 JS 库
- javascript日常使用
- Javascript模仿淘宝信用评价实例(附源码)
- JSON介绍
- Javascript BOM学习小结(六)