JS雪花特效

最新推荐文章于 2024-07-20 23:54:17 发布

小白阿楠

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量192

点赞数 1

分类专栏：前端js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_49141728/article/details/110440166

版权

前端js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>新增DIV</title>
    <style>
        body {
            background-image: url("snow-night.jpg");    //背景图
            background-size: 100% 100%;
            background-attachment: fixed;
        }
    </style>
    <script>
//        function add() {
//            var mydiv = document.createElement("div");
//            mydiv.style.width = "100px";
//            mydiv.style.height = "50px";
//            mydiv.style.backgroundColor = "blue";
//            document.body.appendChild(mydiv);
//        }

        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;

        function add() {
            for (var i = 1; i <= 50; i++) {
                var mydiv = document.createElement("div");
                mydiv.style.width = "100px";
                mydiv.style.height = "50px";
                //雪花图
                mydiv.innerHTML = "<img src='white-snow.png', width='22'>";
                mydiv.style.position = "fixed";
                mydiv.style.left = Math.random() * windowWidth + "px";
                mydiv.style.top = Math.random() * windowHeight + "px";
                document.body.appendChild(mydiv);
            }
        }

        function del() {
            var allSnow = document.getElementsByTagName("div");
            var length = allSnow.length;
            for (var i = 0; i < length; i++) {
                document.body.removeChild(allSnow[i]);  // 删除body的子节点
                allSnow[0].remove();                // 直接将该元素删除
                allSnow[i].style.display = "none";  // 通过设置元素为不可见来模拟删除
            }
        }

        var snow = null;
        function start() {
            if (snow)
                clearInterval(snow);
            snow = setInterval(function () {
                var div = document.getElementsByTagName("div");
                for (var i = 0; i < div.length/2; i++){         //向右
                    var left = div[i].offsetLeft;
                    var top = div[i].offsetTop;
                    left++;
                    top++;
                    div[i].style.left = left + 'px';
                    div[i].style.top = top + 'px';
                    div[i].style.position = "fixed";

                }
                for (var i = div.length/2; i < div.length; i++){            //向左
                    var left = div[i].offsetLeft;
                    var top = div[i].offsetTop;
                    left--;
                    top++;
                    div[i].style.left = left + 'px';
                    div[i].style.top = top + 'px';
                    div[i].style.position = "fixed";
                }
            }, 50);
        }

        function stop() {
            clearInterval(snow);
        }
    </script>
</head>
<body>
    <input type="button" value="增加" onclick="add()"/>
    <input type="button" value="开始" onclick="start()"/>
    <input type="button" value="停止" onclick="stop()"/>
    <input type="button" value="删除" onclick="del()"/>
</body>
</html>

小白阿楠

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS雪花特效

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>新增DIV</title> <style> body { background-image: url("snow-night.jpg"); //背景图 background-size: 100%
复制链接

扫一扫