JavaScript模拟重力状态下抛物运动的方法


Posted in Javascript onMarch 03, 2015

本文实例讲述了JavaScript模拟重力状态下抛物运动的方法。分享给大家供大家参考。具体分析如下:

这段JavaScript代码模拟重力状态下的抛物运动,可设置以下参数:横向初速度、纵向初速度、重力加速度(如果这个加速度是一个随时间变化的值,就能达到其他非匀加速运动的效果了)、动画间隔时间等,相对专业

<!doctype html>
<html>
<head>
<title>js抛物运动</title>
<meta charset="utf-8" />
<style type="text/css">
*{padding:0;margin:0;}
body{font-size:13px;padding:10px;}
p{margin:2px;}
.wrap{position:relative;width:1000px;height:550px;margin:0 auto;border:1px solid #ccc;margin-top:50px;}
#fall{width:20px;font-size:1px;height:20px;background:#000;position:absolute;top:0;left:0;}
</style>
</head>
<body>
<h3>模拟重力状态下的抛物运动(假使1px==1mm)</h3>
<p>横向初速度:<input id="Vx" type="text" value="2" />px/ms</p>
<p>纵向初速度:<input id="Vy" type="text" value="-2" />px/ms</p>
<p>重力加速度:<input id="a" type="text" value="0.0098" />px/平方ms</p>
<p>(如果这个加速度是一个随时间变化的值,就能达到其他非匀加速运动的效果了。)</p>
<p>单位时间:<input id="t" type="text" value="10" />(记录运动的时间间隔)
<p><input type="button" value="演示" onclick="demo(document.getElementById('Vx').value, document.getElementById('Vy').value, document.getElementById('a').value, document.getElementById('t').value)"/></p>
<div class="wrap">
<div id="fall">o</div>
</div>
</body>
<script type="text/javascript">
function demo(x,y,a,t) {
var f=document.getElementById('fall');
var Vx=parseInt(x),
Vy=parseInt(y),
g=a,
t=parseInt(t),
h=0,l=0,Sx=0,Sy=0;
var i=setInterval(function(){
if(f){
Sx+=Vx*t;
l=Sx;
Vy+=g*t;
h+=Vy*t;
f.style.left=l+'px';
f.style.top=h+'px';
if(h>500||l>900)clearInterval(i);
}
},t);
}
</script>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
url 特殊字符 传递参数解决方法
Jan 01 Javascript
IE本地存储userdata的一个bug说明
Jul 01 Javascript
input按钮的事件处理大全
Dec 10 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 #Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 #Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 #Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 #Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 #Javascript
JS运动基础框架实例分析
Mar 03 #Javascript
jQuery DOM插入节点操作指南
Mar 03 #Javascript
You might like
我的论坛源代码(九)
2006/10/09 PHP
php 无限级 SelectTree 类
2009/05/19 PHP
二招解决php乱码问题
2012/03/25 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
python执行外部程序的常用方法小结
2015/03/21 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
Python JSON编解码方式原理详解
2020/01/20 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
关于python中导入文件到list的问题
2020/10/31 Python
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
社会实践先进工作者事迹材料
2014/05/06 职场文书
环卫工作汇报材料
2014/10/28 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android