当前位置:首页 > Web开发 > 正文

JS实现随机生成球在页面弹动

2024-03-31 Web开发

    <div class="dian">

        <input type="button" value="点我一下试试!">

    </div>

    <script>

        let clickInput = document.querySelector("input");

        let randomTop, randomLeft, vx, vy, moveDiv, timer

        clickInput.addEventListener("click", () => {

            moveDiv = document.createElement("div");

            document.body.appendChild(moveDiv);

            randomTop = parseInt(Math.random() * (innerHeight - 99));

            randomLeft = parseInt(Math.random() * (innerWidth - 99));

            moveDiv.style.top = randomTop + "px";

            moveDiv.style.left = randomLeft + "px";

            vx = 1;

            vy = 1;

            timer = setInterval(() => {

                randomTop += vx;

                randomLeft += vy;

                moveDiv.style.top = randomTop + "px";

                moveDiv.style.left = randomLeft + "px";

                if (randomTop >= (innerHeight - 99) || randomTop <= 0) {

                    vx = -vx;

                }

                if (randomLeft >= (innerWidth - 99) || randomLeft <= 0) {

                    vy = -vy;

                }

            }

                , 1)

        })

    </script>

</body>

JS实现随机生成球在页面弹动

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/32708.html