JS運動基礎框架實例分析

2024-05-06 16:15:50

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了JS運動基礎框架,實例分析了javascript定時器及div樣式的使用技巧,需要的朋友可以參考下

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