進度條插件

很久沒來這裏了。。記錄下 最近整理的 一個小插件。並無按照jquery 插件的模式來作。

如下是代碼。就不詳解了。邏輯很簡單。有啥不明白的能夠留言。

function loadCon (opts) {
    var count = 1,
        initTime = 800, //ms
        finishCount = 0, //totalCount = 100
        perPercent = 0,
        perTime = 0,
        $count = null,
        $pie1 = null,
        $pie2 = null,
        limitCount = 0,
        percentVal = 1,
        timer = null;


    var loadHtml = '<div class="overlayLoadPPt">'+
                   '    <div class="pie pie1" style="transform: rotate(0deg);"></div><div class="pie pie2" style="transform: rotate(-180deg);"></div>'+
                   '    <div class="covert"><p class="count"></p> </div>'+
                   //'    <div class="covert"><img src="../img/loadingBG.png" style="width: 100%;"> </div>'
                   '</div>';
    function buildHtml() {
        var $overlayLoadPPt = $('.overlayLoadPPt');
        $overlayLoadPPt.remove();
        $(loadHtml).prependTo('body');
        $count = $('.overlayLoadPPt .count');
        $pie1 = $('.overlayLoadPPt .pie1');
        $pie2 = $('.overlayLoadPPt .pie2');
        beginLoading();
    }

    function beginLoading() {
        var deg = parseInt(360/count);
        perTime = initTime/deg;
        limitCount = perPercent * percentVal;
        doTimer();
    }

    this.updateChanges = function (val) {
        if(val >= count) {
            limitCount = 100;
        }
        else {
            percentVal = val;
            limitCount = perPercent * percentVal;
        }
    };
    this.finishLoad = function () {
        perPercent = count;
        limitCount = 100;
    };

    function doTimer() {
        timer = setTimeout(function () {
            clearTimeout(timer);
            timer = null;
            if(finishCount <= limitCount) {
                finishCount++;
                $count.html(finishCount+'%');
                if(finishCount != 50) {
                    $pie1.css('transform','rotate('+(finishCount*3.6+180)+'deg)');
                }
                else {
                    $pie2.css({'background':'#2e7418','width':'160px','height':'160px','transform':'rotate(0deg)'});
                    $pie1.css('transform','rotate(360deg)');
                }
            }

            if(finishCount >= 100) {
                clearTimeout(timer);
                timer = null;
                $count = null;
                $pie1 = null;
                $pie2 = null;
            }
            else {
                doTimer();
            }
        },perTime);
    }

    function init() {
        count = opts.count;
        initTime = opts.initTime ? opts.initTime : initTime;
        perPercent = parseInt(100/count);
        buildHtml();
    }

    init();
};
loadCon.prototype = {
    setPecent: function (val) {
        this.updateChanges(val);
    },
    setEnd: function () {
        this.finishLoad();
    }
};

　　這個是js部分。如下是CSS部分

.overlayLoadPPt {
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999999;
            background: #FFF;
            opacity: 1;
        }
        .pie {
            position: absolute;
            width: 160px;
            height: 160px;
            border-radius: 150px;
            background: #2e7418;
            clip: rect(0px,80px,160px,0px);
            left: 50%;
            top: 30%;
            margin: -80px;
        }
        .pie2 {
            z-index: 9999;
            background: #FFF;
            width: 161px;
            height: 161px;
        }
        .pie1 {
            z-index: 999;
        }
        .count {
            position: absolute;
            top: 65%;
            text-align: center;
            width: 100%;
            color: #FFF;
        }
        .covert {
            background: #57b243; position: absolute;z-index: 999999;
            width: 150px; height: 150px; border-radius: 340px; left: 50%; top: 30%; margin: -75px; overflow: hidden;
        }

　　

調用也很簡單。確保引入jquery。版本 應該還好。用最新的就行了

var load = new loadCon({count:5});  
count:就是當前進度條分紅幾段來加載。
方法：setPecent
改變狀態
load.setPecent(3)

setEnd
告訴插件能夠結束了