ちょうきょう666

导航

javascript8图片刹车运动 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             #div1{width: 100px;height: 100px;position: absolute;background-color: red;}
 8             
 9         </style>
10         <script>
11             window.onload=function(){
12                 var oDiv1=document.getElementById("div1");
13                 var oBtn1=document.getElementById("btn1");
14                 var timer=null;
15                 oBtn1.onclick=function(){
16                     startMove(500);
17                 }
18                 function startMove(iTarget){
19                     clearInterval(timer);
20                     var speed=(iTarget-oDiv1.offsetLeft)/8;
21                     speed=speed>0?Math.ceil(speed):Math.floor(speed);//ceil为向上取整，floor为向下取整
22                     timer=setInterval(function(){
23                         if(oDiv1.offsetLeft>=iTarget){
24                             clearInterval(timer);
25                         }else{
26                             oDiv1.style.left=oDiv1.offsetLeft+speed+"px";
27                         }
28                         
29                     },30);
30                 }
31             }
32             
33         </script>
34     </head>
35     <body>
36         <button type="button" id="btn1">运行</button>
37         <div id="div1">
38             
39         </div>
40     </body>
41 </html>

 

posted on 2020-12-18 14:26  ちょうきょう666  阅读(59)  评论(0)    收藏  举报