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>新闻热点
疑难解答
