过年了，开发一款春节创意进度条插件，让你的网站都带有春节的气息！

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

前言

快过年了，为了让网站带有春节的气息，参考：春节创意投稿大赛选题，开发带有春节特色的进度条。

效果演示

在线体验

使用说明

1. 在项目中引入jquery、进度条插件,将如下代码加入页面head元素中。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://dcs4569.github.io/js/farmer.progress.js"></script>

2. 指定页面元素执行progress函数，则在元素后面添加进度条，代码如下：

//年年有鱼
$('#demo').progress({type:'fish'},function(){
    width ++;
    if(width < 10){
        return 10;
    }
    return width;
});

//打运营
$('#demo').progress({type:'farmer',},function(){
    width ++;
    if(width < 10){
        return 10;
    }
    return width;
});

//默认
$('#demo').progress({t},function(){
    width ++;
    if(width < 10){
        return 10;
    }
    return width;
});

参数1为插件配置，相关配置会通过$.extend函数拓展到运行时配置，缺省值为，可以通过此参数改变缺省值：

{
    type:'',
    width:0,
    words:['正在写','快了快了','马上好','再等下','下周一','明天吧'],
    name:'Troy',
    desc:'策划案',
    timer:500,
    flagText:'年年有大鱼'
}

其中type为进度条类型，fish为“年年有鱼”，farmer为“打运营”，其他为默认。

参数2为进度条更新回调函数，函数返回值为当前进度条进度，如：0,20,50,100等。

代码设计

编写静态页面

编写静态页面元素，实现上图年年有余进度条效果，代码如下：

<div class="farmer-progress-outer">
    <div class="farmer-progress-inner">
        <div class="iconfont fish"></div>
        <div class="flag">年年有大鱼</div>
        <div class="desc"
             style="position: absolute; right: 0px; bottom: 20px; width: 50px; text-align: center; font-size: 8px; color: rgb(102, 102, 102);">
            55%
        </div>
        <div class="bar red"></div>
    </div>
</div>

编写插件结构

使用jquery标准插件开发结构，代码如下：

;(function($,window){
    var config = {
        type:'',
        width:0,
        words:['正在写','快了快了','马上好','再等下','下周一','明天吧'],
        name:'Troy',
        desc:'策划案',
        timer:500,
        flagText:'年年有大鱼'
    };
    function fishProgress(options){
    }

    $.fn.extend({
        progress:function(options,callback){
            var param = $.extend({that:this,callback:callback,type:'fish'},config,options);
            fishProgress(param);
    });
})(jQuery,window);

调用插件方式为：$(页面元素).progress(options,callback)

实现插件函数fishProgress

将静态页面元素使用js方式添加到页面上。

function fishProgress(options){
    options.width = options.that.parent().width();
    let outer = createElementWithClass('div','farmer-progress-outer');
    outer.style.width = options.width + 'px';
    let inner = createElementWithClass('div','farmer-progress-inner');
    inner.style.width = '50px';


    let fish = createElementWithClass('div','iconfont fish');
    fish.innerHTML = '';
    appendElement(inner,fish);
    let flag = createElementWithClass('div','flag');
    flag.innerHTML = options.flagText;
    appendElement(inner,flag);
    var desc = createElementWithClass('div','desc');
    desc.innerHTML = '0%';
    desc.style.position = 'absolute';
    desc.style.right = '0px';
    desc.style.bottom = '20px';
    desc.style.width = '50px';
    desc.style.textAlign = 'center';
    desc.style.fontSize = '8px';
    desc.style.color = '#666';
    options.desc = desc;
    appendElement(inner,desc);
    appendElement(inner,createElementWithClass('div','bar red'));
    appendElement(outer,inner);
    options.outer = outer;
    options.inner = inner;
    options.flag = flag;
    options.that.after(outer);

    updateFishProgress(options)
}

//更新进度条进度
function updateFishProgress(options){
    setTimeout(function(){
        try {
            var val = options.callback();
            if(val > 100){
                val = 100;
                options.desc.innerHTML = val + '%';
                setTimeout(function(){
                    $(options.outer).remove();
                },500);
                return;
            }
            options.desc.innerHTML = val + '%';
            $(options.inner).animate({width:50 + (options.width -50) * val/100 + 'px'},options.timer-50);
        }catch (e) {
            console.log(e)
        }
        updateFishProgress(options);
    },options.timer);
}

源码地址

css源码

js插件源码

体验地址