简单的进度条

对于我知识吸取慢,就从简单的学起吧!简单的进度条。感受本身写的代码不好劲,因此若是有大神不经意通过的话,还望动动尊指,指点一二,多多指教^-^!css

接下来我讲出个人故事!我就但愿个人代码后期重用性能够好点,因此就想本身写一些组件,这样能够既方便又快捷。先从进度条开始!web

 这是jq宝宝:chrome

/*
    进度条(长方形简单)
    传入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";
    }
}

光明的路在前方,要一往无前,天天鼓励本身一点点,干了这杯鸡汤。
 app

相关文章
相关标签/搜索