JS运动基础框架实例分析

时间:2020-05-13 mikyou 人气:0

本文实例讲述了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程序设计有所帮助。

加载全部内容