JS运动基础框架实例分析

(编辑：jimmy 日期: 2026/3/5 浏览：3 次 )

本文实例讲述了JS运动基础框架。分享给大家供大家参考。具体分析如下：

这里需要注意：

1. 在开始运动时关闭已有的定时器
2. 把运动和停止隔开
复制代码代码如下:<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 200px;
                height: 200px;
                background: red;
                position: absolute;
                left:0;
                top:60px;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oDiv=document.getElementById("div1");
                var oBt=document.getElementsByTagName('input')[0];
                var time=null;
                oBt.onclick=function(){
                    clearInterval(time);//这里首先要关闭一个定时器，这是因为解决在运动过程中多次点击按钮从而产生多个定时器叠加的bug
                    time=setInterval(function(){
                        var speed=7;
                        if(oDiv.offsetLeft<=600)
                        oDiv.style.left=oDiv.offsetLeft+speed+'px';
                        else{
                            clearInterval(time);
                        }
                    },30);
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="开始运动" />
        <div id="div1"></div>
    </body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：深入理解JavaScript系列（28）：设计模式之工厂模式详解
下一篇：jQuery DOM插入节点操作指南