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 相关文章推荐
js获取变量
Aug 24 Javascript
javascript 写类方式之三
Jul 05 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
我所理解的JavaScript中的this指向
Sep 04 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/12/06 PHP
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
Python实现学生成绩管理系统
2020/04/05 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
windows下python安装pip方法详解
2020/02/10 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
四年级语文教学反思
2014/02/05 职场文书
教研活动总结
2014/04/28 职场文书
县级文明单位申报材料
2014/05/23 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
英文邀请函
2015/02/02 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android