JS实现一个物体的自由落体

最新推荐文章于 2021-06-01 06:44:41 发布

SnowAnna

最新推荐文章于 2021-06-01 06:44:41 发布

阅读量1.4k

点赞数

分类专栏： HTML5+CSS3

本文链接：https://blog.csdn.net/weixin_38289699/article/details/79037255

版权

HTML5+CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

代码如下

   <!DOCTYPE html>   
 

   < 
  html  
  lang= 
  "zh-cn">   
 

   < 
  head>   
 

       < 
  meta  
  charset= 
  "UTF-8">   
 

       < 
  title>HTML5+CSS3练习</ 
  title>   
 

       
 

   </ 
  head>   
 

   < 
  body>   
 

      < 
  title></ 
  title>   
 

   < 
  p>横向系数：< 
  input  
  id= 
  "hp"  
  type= 
  "text"  
  value= 
  "0.1" /> (0-1)</ 
  p>   
 

   < 
  p>纵向系数：< 
  input  
  id= 
  "vp"  
  type= 
  "text"  
  value= 
  "0.6" /> (0-1)</ 
  p>   
 

   < 
  p>速度：< 
  input  
  id= 
  "sp"  
  type= 
  "text"  
  value= 
  "30" />(20-1000)   
 

   < 
  input  
  type= 
  "button"  
  value= 
  "demo"  
  onclick= 
  "demo(document.getElementById('hp').value, document.getElementById('vp').value, document.getElementById('sp').value)" /></ 
  p>   
 

   < 
  div  
  style= 
  "margin-left:600px;">   
 

       < 
  div  
  id= 
  "fall"  
  style= 
  "width:30px; height:30px; background:#f90; position:relative; right:0px; bottom:40px"></ 
  div>   
 

   </ 
  div>   
 

   < 
  script  
  type= 
  "text/javascript">   
 
 
  var i  
  =  
  null;   
 
 
  function  
  demo( 
  hp, 
  vp, 
  sp) {   
 

        
  var f 
  =document. 
  getElementById( 
  'fall');   
 

           f.style.right 
  = 
  '0px';   
 

           f.style.bottom 
  = 
  '40px';   
 

           i 
  && 
  clearInterval(i);   
 

        
  var h 
  = 
  1,v 
  = 
  1,hp 
  =(hp 
  > 
  0 
  &&hp 
  < 
  1) 
  ?hp 
  : 
  0.2,vp 
  =(vp 
  > 
  0 
  &&vp 
  < 
  1) 
  ?vp 
  : 
  0.5,sp 
  =(sp 
  > 
  20  
  || sp 
  < 
  1000) 
  ?sp 
  : 
  30;   
 

           i 
  = 
  setInterval( 
  function(){   
 

                
  if(f){   
 

                    
  var r 
  = 
  parseInt(f.style.right) 
  +h,b 
  = 
  parseInt(f.style.bottom) 
  -v;   
 

                   f.style.right 
  =r 
  + 
  'px';   
 

                   f.style.bottom 
  =b 
  + 
  'px';   
 

                    
  if(r 
  > 
  1000) 
  clearInterval(i);   
 

                    
  if(b 
  >- 
  210){   
 

                       v 
  += 
  2   
 

                   }  
  else {   
 

                       h 
  =(v 
  > 
  0) 
  ?v 
  *hp 
  : 
  0;   
 

                       v 
  *=(v 
  > 
  0) 
  ?- 
  1 
  *vp 
  : 
  0   
 

                   }   
 

               }   
 

           },sp);   
 

       }   
 

   </ 
  script>   
 

          
 

   </ 
  body>   
 

   </ 
  html>  
 

SnowAnna

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现一个物体的自由落体

代码如下 html lang="zh-cn"> head> meta charset="UTF-8"> title>HTML5+CSS3练习title> head> body> title>title> p>横向系数：input id="hp" type="text" value="0.1" /> (0-1
复制链接

扫一扫