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

Posted 何伟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS实现随机生成球在页面弹动相关的知识,希望对你有一定的参考价值。

<body>
    <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实现随机生成球在页面弹动的主要内容,如果未能解决你的问题,请参考以下文章

js从数组中随机获取n个不重复的数据

如何用canvas画板实现一个简单的球在盒子内反弹运动

通过js实现随机生成图片

js实现刷新页面出现随机背景图

请解释以下js代码怎么生成随机颜色?

js怎么产生一个3位数随机数?