这篇博客介绍了如何利用HTML的div元素和CSS来实现一个带有圆角的进度条效果。通过设置border-radius属性实现圆角，通过JavaScript动态改变div的宽度和背景色以展示进度。当进度超过50%时，进度条颜色会变为红色。
用div实现进度条，并且为圆角div
效果图：
css：
<style type="text/css">
.background_div{width: 65%;border: 1px solid lightgray;border-radius:20px; height: 10px;margin-top:2px;margin-left: 13%;}
#bar{width: 1%;display: block;background: #14C9A5;float: left;border-radius:20px;height: 100%;text-align: center;font-size: 0.6em;}
</style>
注：border-radius:20px这个样式是为了使div变为变为圆角
js：
function $(obj)
{
return document.getElementById(obj);
}
function go()
{
var a = 1024;
var b = 524;
var result = Math.floor(b/a*10000)/100.00;
$("bar").style.width = result+"%";
$("bar").innerHTML = result+"%";
//当result大于50，进度条背景色换成红色，小于50为绿色
if(result>50)
{
$("bar").style.background="#FF5B5F";
}
}
jsp：
<body onload="go();">
<div class="background_div">
<strong id="bar"></strong>
</div>
</body>
扫一扫
952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
