首页 > 代码库 > JavaScript控制循环移动模板

JavaScript控制循环移动模板

2024-10-12 14:01:39   215人阅读

在这里我是定义的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控制循环移动模板


联系
我们