HTML如何做出这种效果的进度条
发布网友
发布时间：2022-04-06 12:01
共5个回答
热心网友
时间：2022-04-06 13:31
span{display:inline-block;*display:inline-block;zoom:1;}
.bg{width:300px;height:20px;border-radius:10px;background:#3D3C3A;}
.main{height:20px;border-radius:10px;background:#55404C;}
<span class="bg">
<span class="main"></span>
</span>
<span class="num">70%</span>
$(function(){
var _width = $('.num').text();//获取百分比数值
$('.main').css('width',_width);//将数值赋值给main的width
});
热心网友
时间：2022-04-06 14:49
然后 td 放一个 img ，然后用 js改变img 的 width 。
热心网友
时间：2022-04-06 16:23
热心网友
时间：2022-04-06 18:15
热心网友
时间：2022-04-06 20:23
span{
display:inline-block;
*display:inline-block;
zoom:1;
}
.bg{
width:300px;
height:20px;
border-radius:10px;
background:#3D3C3A;
}
.main{
/* width:70%; */
height:20px;
border-radius:10px;
background:#55404C;
}</style>
==============================================
<script>
function assign(){
var _width = document.getElementById("percent").innerText;
alert(_width);
document.getElementById("changed").style.width = _width;
}
</script>
==========================================
<BODY>
<span class="bg">
<span class="main" id="changed"></span>
</span>
<span class="num" id="percent">70%</span>
<input type="button" value="赋值" onclick="assign()">
</body>
