JavaScript控制循環移動模板
阿新 • • 發佈：2017-06-27
代碼 interval doc color head javascrip style 模板 tint
在這裏我是定義的div模板來移動，代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #div1{ 8 width: 200px; 9 height: 200px; 10 background-color: red;11 } 12 </style> 13 </head> 14 <body> 15 <div id="div1" style="position: relative;left: 200px" > 16 </div> 17 <script type="text/javascript"> 18 var num=document.getElementById("div1") 19 //div塊的初始值 20 var nums=200; 21 //循環移動，每0.5秒移動一次 22 var testInterval=setInterval(fun,500)23 function fun(){ 24 //設置新的left的值 25 num.setAttribute("style","position: relative;left:"+nums+‘px‘) 26 //每次移動10px 27 nums+=10; 28 //當left: 1110px的時候就停止移動 29 if(nums==1110){ 30 clearInterval(testInterval); 31 } 32 } 33 </script> 34</body> 35 </html>
setAttribute只能對行屬性進行操作，其他的屬性是訪問不到的。JavaScript控制循環移動模板