原生JS实现各种运动之重心运动

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现各种运动之重心运动</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
        var iSpeedX = 10;
        var iSpeedY = 10;

        function startMove() {

            setInterval(function () {

                var oDiv = document.getElementById('div1');

                //将Y轴增加速度，实现重力运动
                iSpeedY += 10;

                var l = oDiv.offsetLeft + iSpeedX;
                var t = oDiv.offsetTop + iSpeedY;

                //当元素碰到底边时
                if (t >= document.documentElement.clientHeight - oDiv.offsetHeight) {
                    //速度递减
                    iSpeedY *= -0.8;
                    iSpeedX *= 0.8;
                    //误差强行赋值
                    t = document.documentElement.clientHeight - oDiv.offsetHeight;

                    //当元素碰到上边时
                } else if (t <= 0) {
                    //速度递减
                    iSpeedY *= -0.8;
                    iSpeedX *= 0.8;
                    //误差强行赋值
                    t = 0;
                };

                //当元素碰到右边时
                if (l >= document.documentElement.clientWidth - oDiv.offsetWidth) {
                    //速度递减
                    iSpeedX *= -0.8;
                    //误差强行赋值
                    l = document.documentElement.clientWidth - oDiv.offsetWidth;

                    //当元素碰到左边时
                } else if (l <= 0) {
                    //速度递减
                    iSpeedX *= -0.8;
                    //误差强行赋值
                    l = 0;
                };

                //当X轴的速度绝对值小于0时
                if (Math.abs(iSpeedX) < 1) {
                    //强行终止
                    iSpeedX = 0;
                };

                //当Y轴的速度绝对值小于0时
                if (Math.abs(iSpeedY) < 1) {
                    //强行终止
                    iSpeedY = 0;
                };

                oDiv.style.left = l + 'px';
                oDiv.style.top = t + 'px';

            }, 30);
        }
    </script>
</head>

<body>
    <input type="button" value="开始运动" onclick="startMove()" />
    <div id="div1">
    </div>
</body>

</html>