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 相关文章推荐
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
Vue实现导航栏的显示开关控制
Nov 01 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
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
基于anaconda下强大的conda命令介绍
2018/06/11 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
下载官网python并安装的步骤详解
2019/10/12 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
团支书的期末学习总结自我评价
2013/11/01 职场文书
组织关系转移介绍信
2014/01/16 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
股权收购意向书
2014/04/01 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
社区国庆节活动总结
2015/03/23 职场文书
男人帮观后感
2015/06/18 职场文书
公司员工离职感言
2015/08/03 职场文书