进度条的实现

Js：

$(function(){    var goodNum="90%";//好评的百分比    var mediumNum="10%"//中评的百分比    var badNum="3%"//差评的百分比    var num=goodNum.substring(0,2)// 进度条    $(".bars").append("<div class=‘bars_left‘><span class=‘good_number‘>"+num+"</span><span>好评度</span> </div>");    $(".bars").append("<div class=‘bars_middle‘><ul><li>好评（"+goodNum+"）</li><li>中评（"+mediumNum+"）</li><li>差评（"+badNum+"）</li></ul></div>")    $(".bars").append("<div class=‘bars_right‘> </div>")    $(".bars_right").append("<div class=‘progress‘><span class=‘first‘ style=‘width:"+goodNum+"‘><em></em><span></span></span> </div>")    $(".bars_right").append("<div class=‘progress‘><span class=‘two‘ style=‘width:"+mediumNum+"‘><em></em><span></span></span> </div>")    $(".bars_right").append("<div class=‘progress‘><span class=‘three‘ style=‘width:"+badNum+"‘><em></em><span></span></span> </div>")

    var temp=goodNum.tostring().split(‘(‘)[1].split(‘)‘)[0].split(‘,‘);})

css样式：

blockquote:before, blockquote:after,q:before, q:after {    content: ‘‘;    content: none;}

.bars{    overflow: hidden;    border-bottom: 1px solid #E9E4E4;    padding-bottom: 20px;    margin:5px 20px;}.bars_left{    float: left;    margin: 25px 5% 0 0;    font-size: 14px;    overflow: hidden;}.bars_middle{    float: left;    margin: 23px 0 0 0;    font-size: 14px;}.bars_middle ul li{    line-height: 24px;}.bars_left span{    display: block;    text-align: center;}.good_number{    font-size:32px;    color: #f8711f;}.bars_right{    overflow: hidden;    width: 110px;    margin: 26px 0  0 3%;    float: left;}.progress {    height: 16px;    margin-bottom: 8px;    background: #ebebeb;}.progress > span {    position: relative;    float: left;    margin: 0 -1px;    height:16px;    text-align: right;    background: #cccccc;

}.progress > span:before {    content: ‘‘;    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    z-index: 1;    height: 18px;    background: url("../images/progress.png") 0 0 repeat-x;    border-radius: 10px;}.progress span{    background: #39bcaf;    overflow: hidden;

}

实现效果：