JS運動基礎框架實例分析

2019-11-20 13:02:15

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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>