基础js实现下雨效果（超简单）

本文链接：https://blog.csdn.net/qq_62614474/article/details/128909144

今天学习了定时器的做法，于是想着使用setInterval()做个简单的东西。

下面直接上代码（完整）

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>小迪</title>
    <style>
        body {
            width: 100wh;
            height: 100vh;
            background: url(img/background.jpg); //背景图可以直接使用rgb
        }
    </style>
</head>
<body>
    <script>
        setInterval(function () {
            var rain = document.createElement("div");
            rain.style.position = "fixed";
            rain.style.height = 150+"px";
            rain.style.width = "2px";
            rain.style.background = "white"; //可以使用雨滴图片代替，懒没找
            rain.style.filter = "blur(1px)"
            rain.style.top = "0px";
            rain.style.opacity = parseInt(Math.random()*10)/10;
            rain.style.left = Math.random() * 1920 + "px";
            document.body.appendChild(rain);
            var t = 1;
            var timer = setInterval(function () {
                var height = parseInt(rain.style.top);
                t++;
                rain.style.top = height + 2 * (Math.pow(t, 2)) + "px";      // 模拟物体下落的公式
                if (parseInt(rain.style.top) >= 900) {
                    clearInterval(timer);                            //删掉也可以，直接移除元素就不用停止循环调用
                    rain.remove();
                }
            },20)
        },10)
    </script>
</body>
</html>

下面是一张瞬时图：