javascript---在自由落体实现
实现一些简单的物业自由落体需要理解：
clientHeight：浏览器客户机的整体高度
offsetHeight：物（实例div）高低
offsetTop：从对象client最顶层的距离
简单demo例如以下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>free_movement</title>
<style type="text/css">
#div1{
position: absolute;
height: 100px;
width: 100px;
background: red;
}
</style>
<script type="text/javascript">
window.onload=function () {
var btn=document.getElementById('btn');
var div1=document.getElementById('div1'); var Time=null;
var speed=0;
btn.onclick=function () {
startMove();
} function startMove () {
clearInterval(Time);
Time=setInterval(function(){
speed+= 3;
var T = div1.offsetTop + speed;
if(T > document.documentElement.clientHeight - div1.offsetHeight){
T = document.documentElement.clientHeight - div1.offsetHeight;
speed *= -1;
speed *= 0.75;
}
div1.style.top=T+'px';
}, 30)
}
}
</script>
</head>
<body>
<input type='button' value='開始运动' id="btn">
<div id="div1"></div>
</body>
</html>
注：clearTnterval(Time)://防止多个点击事件
版权声明：本文博主原创文章。博客，未经同意不得转载。
javascript---在自由落体实现的更多相关文章
- JavaScript模拟自由落体
1.效果图 2.实现分析 利用Canvas画圆球.地面: 1.下落过程 物理知识回顾,物体下落过程(不计损耗)由重力势能转换成动能 重力势能 Ep = mgh 动能 Ek = (1/2)mv^2 速 ...
- Javascript摸拟自由落体与上抛运动 说明!
JavaScript 代码 //**************************************** //名称:Javascript摸拟自由落体与上抛运动! //作者:Gloot //邮箱 ...
- js实现自由落体
实现自由落体运动需要理解的几个简单属性: clientHeight:浏览器客户端整体高度 offsetHeight:对象(比如div)的高度 offsetTop:对象离客户端最顶端的距离 <!d ...
- 使用CSS3动画模拟实现小球自由落体效果
使用纯CSS代码模拟实现小球自由落体效果: html代码如下: <div id="ballDiv"> <div id="ball">&l ...
- Android游戏开发：物理游戏之重力系统开发--圆形自由落体Demo
本节为大家提供有关物理游戏的知识,讲解了一个简单的圆形自由落体Demo的编写.. Java代码 package com.himi; import java.util.Random; import ja ...
- OpenGL绘制自由落体小球
OpenGL绘制自由落体小球 一. 程序运行的软硬件环境 本次设计在window10系统下进行,运用C++进行编写,在CodeBlocks环境下使用OpenGL进行设计. 所需环境配置分为2部分 ...
- canvas动画:自由落体运动
经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢? 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转 ...
- 洛谷——P1033 自由落体
P1033 自由落体 题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,…．n-1.在地面上有一个小车(长为 L,高为 K,距原点距离为 S1).已知小球下落距离计算公 ...
- 洛谷P1033 自由落体
P1033 自由落体 题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,…．n-1.在地面上有一个小车(长为 L,高为 K,距原点距离为 S1).已知小球下落距离计算公 ...
随机推荐
- ThinkPhp学习11
原文:ThinkPhp学习11 一.模板的使用 (重点) a.规则 模板文件夹下[TPL]/[分组文件夹/][模板主题文件夹/]和模块名同名的文件夹[Index]/和方法名同名的文件[i ...
- linux时间方面的设置
例如以下一段代码能够借鉴: static void _sleep_response_timeout(modbus_t *ctx) { #ifdef _WIN32 /* usleep doesn't e ...
- js动态添加Div
利用JavaScript动态添加Div的方式有很多,在这次开发中有用到,就搜集了一下比较常用的. 一.在一个Div前添加Div <html> <body> <div id ...
- mysql 高可用方案MHA介绍
概述 MHA是一位日本MySQL大牛用Perl写的一套MySQL故障切换方案,来保证数据库系统的高可用.在宕机的时间内(通常10—30秒内),完成故障切换,部署MHA,可避免主从一致性问题,节约购买新 ...
- 连载：面向对象葵花宝典：思想、技巧与实践（28） - 设计原则：内聚&耦合
前面通过实例解说了一个一环扣一环的面向对象的开发流程:用例模型 -> 领域模型 -> 设计模型(类模型 + 动态模型),解答了面向对象怎样做的问题.接下来我们就要讲"怎样做好面向 ...
- JAVA必备——13个核心规范
标准的价值: 你听过这句话吗?"一流企业做标准.二流企业做品牌.三流企业做产品!"我时我就在想,做标准的企业就是一流的?卖产品就是三流公司?而坐产品或者加工的公司,即使说销售量非常 ...
- Java跨域设置
Access-Control-Allow-Origin 为允许哪些Origin发起跨域请求. 这里设置为"*"表示允许所有,通常设置为所有并不安全,最好指定一下. Access-C ...
- 收集经常使用的.net开源项目
Json.NET http://json.codeplex.com/ Json.Net是一个读写Json效率比較高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简单.通过Lin ...
- 【翻译自mos文章】11gR2中的asm后台进程
11gR2中的asm后台进程 參考原文: ASM Background Processes in 11.2 (Doc ID 1641678.1) 适用于: Oracle Database - Ente ...
- 一个用js写的接口http调试程序
公司有非常多手机app的项目.手机app又要常常訪问后台提交与查询数据. 所曾经端app与后台的开发与測试过程中接口调试是一个常常要做的工作. 而每当出现一个BUG,前端appproject师与后台p ...