20.JavaScript实现简单的圆球反弹运动

JavaScript实现简单的圆球反弹运动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width...

JavaScript实现简单的圆球反弹运动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            border-radius: 50%;
            background: #008c8c;
            position: fixed;
            left: 100px;
            top: 100px;
        }
    </style>
</head>

<body>
    <div class="circle"></div>

    <script>
        var circle = document.querySelector(".circle");
        var style = window.getComputedStyle(circle);
        var disX = 10,
            disY = 10,
            time = 30;


        circle.onclick = function () {
            setInterval(function () {
                var left = parseFloat(style.left);
                var top = parseFloat(style.top);
                var newLeft = left + disX;
                var newTop = top + disY;

                if (left < 0) {
                    newLeft = 0;
                    disX = -disX;

                }
                if (left > document.documentElement.clientWidth - parseInt(style.width)) {
                    newLeft = document.documentElement.clientWidth - parseInt(style.width);
                    disX = -disX;
                }
                if (top < 0) {
                    newTop = 0;
                    disY = -disY;

                }
                if (top > document.documentElement.clientHeight - parseInt(style.height)) {
                    newTop = document.documentElement.clientHeight - parseInt(style.height);
                    disY = -disY;
                }

                circle.style.left = newLeft + "px";
                circle.style.top = newTop + "px";

            }, time);
        }
    </script>
</body>

</html>
index.html
  • 发表于 2020-04-29 15:52
  • 阅读 ( 95 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除