自由落体运动

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7         <title>12.自由落体</title>
 8         <meta name="author" content="Administrator" />
 9         <!-- Date: 2014-12-15 -->
10         <style>
11             *{margin:0;padding:0}
12             #div1{width:100px;height:100px;position:absolute;background:red}
13             #line{width:1px;height:500px;background:#000000;position:absolute;left:500px;}
14         </style>
15     </head>
16     <body>
17         <div id="div1"></div>
18         <script>
19              var oDiv1=document.getElementById('div1');
20              var timer=null;
21              var iSpeed=3;//因为速度在定时器里面要做加减运算,所以要放在全局
22              
23              timer=setInterval(function(){
24                      iSpeed +=3;
25                      var T= oDiv1.offsetTop + iSpeed ;
26                      
27                      if( T > document.documentElement.clientHeight - oDiv1.offsetHeight ){
28                          T = document.documentElement.clientHeight - oDiv1.offsetHeight;
29                          iSpeed *=-1;
30                          iSpeed *=0.75
31                      }
32                      oDiv1.style.top = T +'px';
33                      
34                      if( oDiv1.offsetTop ==  document.documentElement.clientHeight - oDiv1.offsetHeight && Math.abs (iSpeed) < 1 ){
35                           clearInterval( timer );
36                           iSpeed=0
37                      }
38                      
39                      document.title= oDiv1.offsetTop +'-'+ iSpeed
40                      
41              },30)
42              
43         </script>
44     </body>
45 </html>