js雪花特效

思路：

1. 设置一个div —— 当做雪花出生的地图

2. 获取它的宽高 —— 雪花产生的随机坐标在 div 宽高范围内

3. 设置雪花对象 —— 用来装雪花的大小、透明度、坐标、移动速度等属性

4. 设置定时器 —— 每隔相应时间（100ms）产生一个随机坐标的雪花，并添加移动速度

5. 设置第二个定时器 —— 监听雪花移动的距离，超出预设范围（整个屏幕）后移除雪花对象 和 定时器

贴出js代码，写得有那么一些乱，求各位大佬修改！

const Dot = {
/*
    // 点的x坐标
    dotX: 0,
    // 点的y坐标
    dotY:0,
    // 点的大小
    dotSize:2,
    // 点的透明度
    dotOpacity:0.5,
    // 创建点的dom结构
    dotDom:'',
    // 挂载点的dom结构
    allDom:'',
    // 点移动的速度
    dotSpeed:0.5,
*/
    creatDot: () => {
        const allDom = document.getElementById('sky');
        // 确定位置坐标
        const { dotX, dotY } = Dot.dotPosFun()
        const dotSize = Dot.dotSizeFun()
        const dotOpacity = Dot.dotOpacityFun()
        // console.log(dotSize,dotOpacity)
        const dotDom = document.createElement('div');
        dotDom.setAttribute('class','dot')
        // dotDom.setAttribute('data-id',time)
        dotDom.style.top = `-${dotY}px`
        dotDom.style.left = `${dotX}px`
        dotDom.style.width = `${dotSize}px`
        dotDom.style.height = `${dotSize}px`
        dotDom.style.opacity = `${dotOpacity}`
        allDom.appendChild(dotDom)
        const dotSpeed = dotOpacity
        var newTop = Number(-dotY)
        Dot.dotMove(newTop,dotSpeed,dotDom)
    },
    // 点的随机位置
    dotPosFun: () => {
        // const pageY = document.body.clientHeight
        const pageY = document.getElementById("sky").clientHeight
        const pageX = document.body.clientWidth
        // console.log(pageX,pageY)
        const dotX = Dot.randomNum(0,pageX)
        const dotY = Dot.randomNum(0,pageY)
        return { dotX, dotY }
    },

    // 点的随机大小
    dotSizeFun: () => {
        const dotSize = Dot.randomNum(0,5)
        // console.log(typeof(dotSize))
        return dotSize
    },

    // 点的随机透明度
    dotOpacityFun: () => {
        const dotOpacityNum = Dot.randomNum(1,10)
        const dotOpacity = Number(`0.${dotOpacityNum}`)
        return dotOpacity
    },

    // 随机产生一个数
    randomNum: (...arguments) => { 
        // arguments[0] = minNum
        // arguments[1] = maxNum
        switch(arguments.length){ 
            case 1: 
                return parseInt(Math.random()*arguments[0]+1,10); 
            break; 
            case 2: 
                return parseInt(Math.random()*(arguments[1]-arguments[0]+1)+arguments[0],10); 
            break; 
            default: 
                return 0; 
            break; 
        }
    },

    // 点的移动
    dotMove: (newTop,dotSpeed,dotDom) => {
        // pageY 控制雪花落到页面底部往上100px处消失
        const pageY = document.body.clientHeight - 100
        const moveInterval = setInterval(function(){
            // 雪花在页面顶部0px以外，-20px以内的地方产生
            newTop = newTop + dotSpeed*20
            dotDom.style.top = `${newTop}px`
                if(newTop >= pageY){
                    document.getElementById('sky').removeChild(dotDom)
                    clearInterval(moveInterval)
                }
        },1000)
    }

}