用jquery来实现下雨特效

突然在B站上看到很多up主在写这个下雨特效，于是。。。

效果图

这次还是老三样，js，html，css

一.首先，html部分（基本没有）

 <div class="bigbox">

    </div>
    <div class="rainbox">

    </div>

二.css部分

  <style>
        * {
            margin: 0px;
            padding: 0px;
        }
       /* 注意这里面的vw，和vh是相对于视窗的宽度和高度，
        1vw相当于视窗的1%*/
        .bigbox {
            width: 100vw;
            height: 100vh;
            background: url(imagess3/name.jpeg) center no-repeat;
            background-size: cover;
            /* 注意这里面使用了background-size:cover目的是将图片能够覆盖背景区域*/
        }
        
        .rainbox {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
        }
        
        .rain {
            position: absolute;
            top: 0px;
            width: 2px;
            height: 50px;
            background: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .6));
           /* linear-gradient使颜色渐变*/
        }
    </style>

三.最重要的jquery部分

   <script>
        const box = document.querySelector(".rainbox");
        var boxwidth = box.clientWidth;
        var boxheight = box.clientWidth;
        // 每次页面的宽高变化时，盒子的宽高也发生变化
        $(window).resize(function() {
                boxwidth = box.clientWidth;
                boxheight = box.clientHeight;
                // console.log(boxwidth);
                // console.log(boxheight);
                // 这里使用了原生js的方法来获取box的宽度
            })
            //  每隔一段时间添加一些雨滴
        setInterval(() => {
            const rain = $("<div></div>").addClass("rain");
            // 新建一个元素div并加上类名rain
            // 随机刷新雨点的位置，随机生成透明度
            $(rain).css({
                "left": Math.random() * boxwidth + 'px',
                "opacity": Math.random(),
            });

            $(".rainbox").append(rain);
            // 将rain添加到rainbox中
            // 定义一个定时器，让雨点下落，并且当rain的top的值大于盒子的宽度时，
            //就将rain删除
            var race = 1;
            // 现在外面的定时器中设置一个race使其等于1
            const timer = setInterval(() => {
                if (parseInt($(rain).css("top")) >= boxheight) {
                    clearInterval(timer);
                    $(rain).remove();
                    // 如果top值大于了boxheight就清除自身
                }
                race++;
                // 然后race在内部定时器中随着里面定时器设置的时间自增一
                // console.log(race);
                $(rain).css({
                    "top": parseInt($(rain).css("top")) + race + 'px'
                })

            }, 20)

        }, 20)
    </script>

这里面试用了定时器，以及适时清除定时器，这里面还少量的用到了一些原生js的方法，比如clientWidth。
最后，感谢大家观看
我的源码放在了这里