HTML如何做出这种效果的进度条 50

要求输入后面的值之后,进度条可以自己对应比例的显示... 要求输入后面的值之后,进度条可以自己对应比例的显示 展开
 我来答
百度网友ecbabe2
2015-02-11 · 超过21用户采纳过TA的回答
知道答主
回答量:54
采纳率:50%
帮助的人:40.8万
展开全部
我这个做法扒搜用的jQuery

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
});
zph999
2015-02-11 · TA获得超过129个赞
知道小有建树答主
回答量:254
采纳率:37%
帮助的人:56万
展开全部
td 设置一个背景图御春猜片
然后森陆 td 放一镇型个 img ,然后用 js改变img 的 width 。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2015-02-11
展开全部
html5中有这个标签 <meter>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
C呀可可
2015-02-11 · TA获得超过152个赞
知道小有建树答主
回答量:140
采纳率:85%
帮助的人:79.5万
展开全部
留爪我也不会。同求。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
lisany30201314
2017-09-29 · TA获得超过690个赞
知道小有建树答主
回答量:476
采纳率:80%
帮助的人:29.7万
展开全部
<style type="text/css">
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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 4条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式