javascript, 元素 页面 简单碰撞

 <div>

    </div>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: lightblue;

            position: fixed;

            top: 0;

            left: 0;

        }

    </style>

---------------

 <script>

        let setDiv = document.querySelector("div");

        let divWidth = 100,

            divHeight = 100,

            divLeft = 0,

            divTop = 0;

        let vx = 6;

        let vy = 6;

        let timer = setInterval(() => {

            divLeft += vx;

            divTop += vy;

            setDiv.style.left = divLeft + "px";

            setDiv.style.top=divTop+"px";

            if (divLeft + divWidth >= innerWidth || divLeft <= 0) {

                vx = -vx;

            }

            if (divTop + divHeight >= innerHeight || divTop <= 0) {

                vy = -vy;

            }

        }, 25)

    </script>