VIP26/day15/js/6.下落的树叶.js

// 获取屏幕宽高
var screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
var screenHeight = document.documentElement.clientHeight || document.body.clientHeight;


// 构造函数写属性
function leaf() {
    // 图片的宽度
    this.width = Math.random() * 100 + 100;
    // 图片距离左侧的距离
    this.newLeft = Math.random() * (screenWidth - this.width);
    // 距离顶部位置
    this.tops = 0;
    // 图片路径的展示
    this.newImg = '../img/' + Math.floor(Math.random() * 4 + 1) + '.png'
}

// 原型上写方法
// 树叶初始状态方法
leaf.prototype.init = function() {
    // 创建标签
    var imgs = document.createElement("img");
    // imgs元素添加路径
    imgs.src = this.newImg;
    imgs.style.width = this.width + 'px';
    imgs.style.left = this.newLeft + 'px';
    imgs.style.top = this.tops + 'px';
    this.img = imgs;
    document.body.appendChild(imgs);

}

// 树叶落下方法
leaf.prototype.fall = function() {
    setTimeout(function(){
       this.timer = setInterval(function(){
            if(this.img.offsetTop < screenHeight - this.img.offsetHeight) {
                this.img.style.top = this.img.offsetTop + 10 + 'px';
            } else {
                clearInterval(this.timer)
            }
        }.bind(this),20)
    }.bind(this),Math.random()*2000)
}

var newArr = [];
for(var i=0; i<30; i++) {
    var leaf1 = new leaf();
    newArr.push(leaf1);
    leaf1.init();
}

// document.onclick = function() {
//     for(var i=0;i<newArr.length;i++) {
//         newArr[i].fall();
//     }
// }