日常开发中，经常会封装一些常用的功能，有些复用性比较高。最好的方式还是封装起来，需要的时候再复用。这里给自己做个记录。

1、阶乘

factorial = num => {
   let count = 1;
   for (let i = 1; i <= num; i++) { 
    count *= i;   
    }   
    return count; 
}

2、累乘

function cumsum() {
     let sum = 0;
     for (let i = 0; i < arguments.length; i++) {
         sum += arguments[i];
     }
     return sum;
 }

3、模拟在线人数自动变化

// 在线人数自动变化插件
(function($){
  $(document).ready(function(){
// 创建构造函数
// ele是元素， opt是文档（JQ所有文档内容）
    var onlineChange=function(ele,opt,basic,num){
        this.ele = $(ele);
        //定义用户可更改的默认值
        this.defaults ={
            basic:['2000','3000','40000'],
            num:'5',
            time:'300'
        };
        this.settings = $.extend({},this.dedaults,opt);

    }
    onlineChange.prototype ={
        //初始化函数，页面加载之前就要添加所有的事件
        change:function(){
            var _this = this;
            basic = _this.settings.basic;
            num = _this.settings.num;
            time = _this.settings.time;
            var length = _this.ele.length;
            let count, random_n;

            function auto_count(){
                for(let i = 0;i<=length;i++){
                    randow_n = Math.floor((Math.random()*num));
                    count= Math.floor(basic[i])+randow_n;
                    _this.ele.eq(i).text(count);
                }

            }
            setInterval(auto_count,time);
        }
    }

    $.fn.onlineNum = function(option){
        var  onlinechange = new  onlineChange(this,option)
        return  onlinechange.change();
    }
 });
})(jQuery);

//调用
$(document).ready(function(){
    $('.online-num').onlineNum({//调用函数
            basic:['4329'],//顺序排列在线人数基数
            num:'100',//随机增长的数值范围,示例[0，100];
            time:'2000' //自动变动时间，1000=1秒
    });
});

4、鼠标移动位移

window.onload = function(){
    document.onmousemove = function(event){
        var left = event.clientX/130 +'px';
        var　top = event.clientY/130+'px';
        var　z = event.clientX/100+'px';
        $(".steps .step:first-child").css("transform","translate3d("+left+","+top+","+z+")");
    };
};

5、 随机粒子运动

同样也是这两个页面背景运用到的粒子效果插件 ukrainebeauty.net/12 和 ukrainebeauty.net/14

粒子插件：JParticles - 一个简洁，高效，轻量级的 Canvas 粒子运动特效库

使用简单，轻量级，可设置参数多。

具体看文档就已经够详细了。

目前具体效果有五个，分别是：

• 粒子运动（Particle）
• 波纹运动（Wave）
• 波纹进度条（WaveLoading）
• 雪花飘落（Snow）
• 线条动画（Line）

在具体的场景设计上面，可以起到不错的效果。