混合模式 java设计模式 js混合模式

function Animation(list) {
    this.box = document.getElementById(list.id);
    this.size = list.size;
    this.url = list.url;
    
    this.init()            //    Animation.prototype中的init()，初始化一些值(非私有)
    this.DOMready();    //    调用Animation.prototype中的 DOMready()，每一个new Animation()都会执行这里面的语句
}

Animation.prototype = {
    //    1.init:初始化一些非私有值
    init:function(){
        this.width  = box.clientWidth;
        this.height = box.clientHeight;
    },
    
   //    2.DOMready:用来生成div的,用到定时器,循环设置
    DOMready: function(){
        var box = this.box;
        var size = this.size;
        // 下面保存了this(Animation)到self之中,因为等会要调用Animation.DOMmove(cirDiv)
        var self = this;
        
        var timer = setInterval(function(){
            var top = 0;
            var xPosition = Math.random()*(self.width - self.size);
            var cirDiv = document.createElement("div");
            cirDiv.style.cssText = "background:"+LYX_Colors_getRandomColor()+";"+"left:"+xPosition+"px;"+ "width:25px;height:25px;border-radius: 50%;position: absolute;";
            box.appendChild(cirDiv);
            
            //    调用Animation.DOMmove(cirDiv),给每个div设置定时器,用来调整top值
            self.DOMmove(cirDiv)        
        }, 300)
    },
    
    //    3.调整top值函数
    DOMmove: function(cirDiv) {
        var top = 0;
        var self = this;
        var cirDiv = cirDiv;
        var timer_2 = setInterval(function() {
            top++;
            cirDiv.style.top = top+"px";
            if (top > self.height - self.size) {
                box.removeChild(cirDiv);
                clearInterval(timer_2);
            }
        },1)
    }
}

 

//    新建s调用方法
var s = new Animation({
    id: "box",
    size: "10"
});