JavaScript - 简单运动 -

最新推荐文章于 2024-07-25 19:32:28 发布

赵羽珩

最新推荐文章于 2024-07-25 19:32:28 发布

阅读量185

点赞数

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style media="screen">
        #div1 {
            width: 100px;
            height: 100px;
            background-color: gray;
            position: absolute;
            left: 15px;
        }
    </style>
</head>
<body>
    <input id="btn1" type="button" value="向右移动">
    <input id="btn2" type="button" value="停止移动">
    <div id="div1"></div>
    <script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            var oBtn1 = document.getElementById('btn1');
            var oBtn2 = document.getElementById('btn2');
            var timer = null

            oBtn1.onclick = function () {
                timer = setInterval(function () {
                    oDiv.style.left = oDiv.offsetLeft + 5 +'px';
                },30)
            }
            oBtn2.onclick = function () {
                clearInterval(timer);
            }
        }
    </script>
</body>
</html>