萬盛學電腦網 >> 腳本專題 >> javascript >> javascript關於運動的各種問題經典總結
javascript關於運動的各種問題經典總結
javascript關於運動的各種問題經典總結
本文實例總結了javascript關於運動的各種問題。分享給大家供大家參考。具體如下：
一、JS運動的各種問題
問題一：
錯誤代碼：
?
1 2 3 4 5 6 7 8 9 10 11 function startMove(){ var timer=null; var div1=document.getElementById("div1"); if (div1.offsetLeft==300){ clearInterval(timer); }else{ timer=setInterval(function(){ div1.style.left=div1.offsetLeft+10+"px"; },30) } }希望實現的功能：
打開定時器timer，讓div1運動到300px，然後讓div1停下即關掉定時器。
錯誤之處：
if語句錯誤，代碼首先設置一個null定時器timer，然後如果div1的左邊距為300px，則關掉定時器timer。否則一直運動。但是if並不是循環語句，if語句執行一次之後將不再執行。所以永遠不會關閉定時器。
正確代碼：
?
1 2 3 4 5 6 7 8 9 10 var timer=null; function startMove(){ var div1=document.getElementById("div1"); timer=setInterval(function(){ if (div1.offsetLeft==300){ clearInterval(timer); } div1.style.left=div1.offsetLeft+10+"px"; },30) }問題二:
錯誤代碼：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 function startMove(){ var speed=1; var timer=null; var oDiv1=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ if (oDiv1.offsetLeft>=300){ clearInterval(timer); }else{ oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; } },30) }希望實現的功能：
連續點擊開始按鈕，div1會加速，這是因為每當點擊按鈕一次，就會開啟一個定時器，累積起來就會加速，所以要在開啟定時器之前不管有沒有定時器開啟都要先關閉一次定時器。但是添加了關閉定時器的clearInterval方法之後，依然會加速。
錯誤之處：
將timer變量放在了startMove方法裡面，相當於每點擊一次按鈕，就會執行一次startMove方法，生成了一個閉包，因此創建了一個局部timer，每一個閉包當中的timer並不會共享，所以還是相當於生成了點擊次數的閉包timer。
正確代碼：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 var timer=null; function startMove(){ var speed=1; var oDiv1=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ if (oDiv1.offsetLeft>=300){ clearInterval(timer); }else{ oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; } },30) }實現分享欄進出功能：
代碼：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 150px; height: 200px; background: burlywood; position: absolute; left: -150px; } span{ width: 20px; height: 60px; position: absolute; background: gold; right: -20px; top: 70px; } </style> <script> window.onload=function(){ var oDiv1=document.getElementById("div1"); oDiv1.onmouseover=function(){ move(0); }; oDiv1.onmouseout=function(){ move(-150); }; }; var timer=null; function move(target){ var oDiv1=document.getElementById("div1"); var speed=0; if (oDiv1.offsetLeft<target){ speed=10; }else{ speed=-10; } clearInterval(timer); timer=setInterval(function(){ if(oDiv1.offsetLeft==target){ clearInterval(timer); }else{ oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; } },30); } </script> </head> <body> <div id="div1"> <span id="span1">分享到</span> </div> </body> </html>實現圖片淡入淡出功能：
代碼：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53javascript排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved