js实现自由落体

最新推荐文章于 2024-08-08 09:50:32 发布

转载最新推荐文章于 2024-08-08 09:50:32 发布 · 494 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/guorange/p/7142611.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现自由落体运动的方法。通过设置元素的位置属性，并利用定时器来更新元素的位置，实现了物体下落的效果。文章还考虑了速度变化及碰撞反弹的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现自由落体运动需要理解的几个简单属性：

clientHeight：浏览器客户端整体高度

offsetHeight：对象（比如div）的高度

offsetTop：对象离客户端最顶端的距离

 1 <!doctype html>  
 2 <html lang="en">  
 3 <head>  
 4     <meta charset="UTF-8">  
 5     <title>free_movement</title>  
 6     <style type="text/css">  
 7         #div1{  
 8             position: absolute;  
 9             height: 100px;  
10             width: 100px;  
11             background: red;  
12         }  
13     </style>  
14     <script type="text/javascript">  
15         window.onload=function  () {  
16             var btn=document.getElementById('btn');  
17             var div1=document.getElementById('div1');  
18   
19             var Time=null;  
20             var speed=0;  
21             btn.onclick=function () {  
22                 startMove();  
23             }  
24   
25             function startMove () {  
26                 clearInterval(Time);   //clearTnterval(Time)://防止多次点击事件的产生
27                 Time=setInterval(function(){  
28                     speed+= 3;  
29                     var T = div1.offsetTop + speed;  
30                     if(T > document.documentElement.clientHeight - div1.offsetHeight){  
31                         T = document.documentElement.clientHeight - div1.offsetHeight;  
32                         speed *= -1;  
33                         speed *= 0.75;  
34                     }  
35                     div1.style.top=T+'px';  
36                 }, 30)  
37             }  
38         }  
39     </script>  
40 </head>  
41 <body>  
42     <input type='button' value='开始运动' id="btn">  
43     <div id="div1"></div>  
44 </body>  
45 </html>