1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px;} 8 </style> 9 <script> 10 /* 11 在js中，如果让一个页面元素动起来 12 */ 13 window.onload = function() { 14 15 var oBtn = document.getElementById('btn'); 16 var oDiv = document.getElementById('div1'); 17 var iTimer = null; 18 19 //点击按钮，让div1横向向右移动 20 //定时器 21 22 /* 23 1.清除定时器，保证运动过程中只有一个定时器在执行 24 2.开始定时器 25 3.开始运动（同时在运动加入判断，以便在需要的时候或者是满足某个要求停止运动） 26 */ 27 oBtn.onclick = function() { 28 29 clearInterval(iTimer); 30 31 iTimer = setInterval(function() { 32 33 //oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; 34 if (oDiv.offsetLeft == 500) { 35 clearInterval(iTimer); 36 } else { 37 oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; 38 } 39 40 }, 30); 41 42 } 43 44 } 45 </script> 46 </head> 47 48 <body> 49 <input type="button" value="动起来" id="btn" /> 50 <div id="div1"></div> 51 </body> 52 </html>