手写进度条

 

function getProcessHtml(beiChuShu,chuShu){
    var html="";
    html+="<p align='center' style='margin-bottom:-4px;'>"+beiChuShu+"/"+chuShu+"</p>";
    if(Number(chuShu)!=0){
        var viewRatio=Number(beiChuShu/chuShu*100).toFixed(2);
        var processRatio;
        if(viewRatio>=100){
            processRatio=100;
        }else{
            processRatio=viewRatio;
        }
        html+="<span class='percent' style='width: 80%'>"
        html+="<span class='percent-child-green' style='width:"+processRatio+"%'></span>";
        html+="</span>"+viewRatio+"%";
    }
    return html;
}

<style> .percent{ margin-top:4px; width:80px; border:1px solid #ccc; height:8px; border-radius:4px; display:inline-block;font-size:5px !important; line-height:8px;} .percent-child-red{height:8px; background:#e55062; border-radius:3px; display:block; margin:0 !important; font-size:5px !important; line-height:8px;} .percent-child-green{height:8px; background:#61e479; border-radius:3px; display:block; margin:0 !important; font-size:5px !important; line-height:8px;} </style> 
getProcessHtml(10,100)；