簡單的進度條

對於我知識吸取慢，就從簡單的學起吧！簡單的進度條。感受本身寫的代碼不好勁，因此若是有大神不經意通過的話，還望動動尊指，指點一二，多多指教^-^!

接下來我講出個人故事！我就但願個人代碼後期重用性能夠好點，因此就想本身寫一些組件，這樣能夠既方便又快捷。先從進度條開始！

 這是jq寶寶：

/*
    進度條（長方形簡單）
    傳入class、寬度width、長度height、邊框顏色border、圓角radius、進度條顏色bgColor,時間time
*/
function getProBar(obj){
    $(obj.class).css({
        "width":obj.width,
        "height":obj.height,
        "border":obj.border,
        "borderRadius":obj.radius
    });
    $(obj.class).append("<div id='sProBar'></div>");
    $("#sProBar").css({
        "width": "0px",
        "height":obj.height,
        "background-color": obj.bgColor,
        "borderRadius":obj.radius
    });
    $("#sProBar").animate({width:obj.width},obj.time);
}

這是js寶寶：

/*
    進度條（長方形簡單）
    傳入大div框id一、小div框id二、寬度width、長度height、邊框顏色border、圓角radius、進度條顏色bgColor
*/
function getProBar(obj){
    var id1 = doc.getElementById(obj.id1),
        id2 = doc.getElementById(obj.id2);
    // //兼容於chrome，Safari等基於webkit的瀏覽器
    // d2.style.webkitAnimationPlayState="running";
    // //兼容firefox瀏覽器
    // d2.style.mozAnimationPlayState="running";

    id1.style.cssText = "width:" + obj.width + ";height:" + obj.height + ";border:" + obj.border + ";border-radius:" + obj.radius ;
    id2.style.cssText = "width:0px;" + "height:" + obj.height + ";background-color:" + obj.bgColor +";border-radius:" + obj.radius + ";transition-duration:" + obj.time;
    var a = id1.clientWidth;
    for(var i=0; i <= a; i++){
        id2.style.width = i + "px";
    }
}

光明的路在前方，要一往無前，天天鼓勵本身一點點，乾了這杯雞湯。