冬至福利：动态下雪参考JS代码

【feat】用字符替换图标，即插即用。同样放入网站全局脚本即可

【fix】页面中部分按钮无法点击的情况

function snow() {

    var flake = document.createElement('div');
    
    flake.innerHTML = '❅';                                 //可选雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
    flake.style.cssText = 'position:absolute;color:#fff;';

    var documentHieght = window.innerHeight;                //获取页面的高度 相当于雪花下落结束时Y轴的位置  
    var documentWidth = window.innerWidth;                  //获取页面的宽度，利用这个数来算出，雪花开始时left的值
    
    var millisec = 10;                                      //定义生成一片雪花的毫秒数
    
    //设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
    
    setInterval(function () {                               //页面加载之后，定时器就开始工作
        var startLeft = Math.random() * documentWidth;      //随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
        var endLeft = Math.random() * documentWidth;        //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
        var flakeSize = 3 + 20 * Math.random();             //随机生成雪花大小
        var durationTime = 4000 + 7000 * Math.random();     //随机生成雪花下落持续时间
        var startOpacity = 0.7 + 0.3 * Math.random();       //随机生成雪花下落 开始 时的透明度
        var endOpacity = 0.2 + 0.2 * Math.random();         //随机生成雪花下落 结束 时的透明度
        var cloneFlake = flake.cloneNode(true);             //克隆一个雪花模板

        //第一次修改样式，定义克隆出来的雪花的样式
        cloneFlake.style.cssText += `
                        left: ${startLeft}px;
                        opacity: ${startOpacity};
                        font-size:${flakeSize}px;
                        top:-25px;
                            transition:${durationTime}ms;`;

        
        document.body.appendChild(cloneFlake);//拼接到页面中

        //设置第二个定时器，一次性定时器，
        //当第一个定时器生成雪花，并在页面上渲染出来后，修改雪花的样式，让雪花动起来；
        setTimeout(function () {
            //第二次修改样式
            cloneFlake.style.cssText += `
                                left: ${endLeft}px;
                                top:${documentHieght}px;
                                opacity:${endOpacity};`;

            //设置第三个定时器，当雪花落下后，删除雪花。
            setTimeout(function () {
                cloneFlake.remove();
            }, durationTime);
        }, 0);

    }, millisec);
}
snow();