百分比进度框

最新推荐文章于 2021-06-03 17:15:36 发布

wqr1128

最新推荐文章于 2021-06-03 17:15:36 发布

阅读量450

点赞数

分类专栏： js 文章标签：百分比进度框 js

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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:12px;border-width:1px;border-style:solid;border-color:rgb(120, 195, 0);border-radius:15px;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-left-radius:4px;border-bottom-right-radius:4px;}
#bar {float:left;width:0px;height:12px;border:0px;background:#77FF00;border-style:solid;border-color:rgb(120, 195, 0);border-radius:15px;border-top-left-radius:4px;border-top-right-radius:1px;border-bottom-left-radius:4px;border-bottom-right-radius:1px;}
</style>
</head>
<body>
<div id="box">
<div id="bar"></div>
</div>
<script language="javascript">
var total = 100; //总数
var curN = 30; //当前值
function show()
{
var o = document.getElementById("bar");
o.style.width = ((curN / total) * 200) + 'px'; //200是外框的宽度
}
show();
</script>
</body>
</html>