码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-12-29 23:55:34      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:||   doc   event   put   val   dom   eve   select   list   

<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实现随机生成球在页面弹动

标签:||   doc   event   put   val   dom   eve   select   list   

原文地址:https://www.cnblogs.com/weijiangZ/p/12116901.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!