实现一些简单的物业自由落体需要理解：

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---在自由落体实现的更多相关文章

  1. JavaScript模拟自由落体

    1.效果图 2.实现分析 利用Canvas画圆球.地面: 1.下落过程 物理知识回顾,物体下落过程(不计损耗)由重力势能转换成动能 重力势能 Ep = mgh 动能  Ek = (1/2)mv^2 速 ...

  2. Javascript摸拟自由落体与上抛运动 说明!

    JavaScript 代码 //**************************************** //名称:Javascript摸拟自由落体与上抛运动! //作者:Gloot //邮箱 ...

  3. js实现自由落体

    实现自由落体运动需要理解的几个简单属性: clientHeight:浏览器客户端整体高度 offsetHeight:对象(比如div)的高度 offsetTop:对象离客户端最顶端的距离 <!d ...

  4. 使用CSS3动画模拟实现小球自由落体效果

    使用纯CSS代码模拟实现小球自由落体效果: html代码如下: <div id="ballDiv"> <div id="ball">&l ...

  5. Android游戏开发：物理游戏之重力系统开发--圆形自由落体Demo

    本节为大家提供有关物理游戏的知识,讲解了一个简单的圆形自由落体Demo的编写.. Java代码 package com.himi; import java.util.Random; import ja ...

  6. OpenGL绘制自由落体小球

    OpenGL绘制自由落体小球 一.    程序运行的软硬件环境 本次设计在window10系统下进行,运用C++进行编写,在CodeBlocks环境下使用OpenGL进行设计. 所需环境配置分为2部分 ...

  7. canvas动画:自由落体运动

    经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢? 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转 ...

  8. 洛谷——P1033 自由落体

    P1033 自由落体 题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,…．n-1.在地面上有一个小车(长为 L,高为 K,距原点距离为 S1).已知小球下落距离计算公 ...

  9. 洛谷P1033 自由落体

    P1033 自由落体 题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,…．n-1.在地面上有一个小车(长为 L,高为 K,距原点距离为 S1).已知小球下落距离计算公 ...

随机推荐

  1. Swift 可展开可收缩的表视图

    主要学习与运行效果 在本节的内容中,我们将通过一个具体实例的实现过程,详细讲解在表视图当中,如何创建一个可展开可收缩的表视图.为了让读者有着更为直观的印象,我们将通过模仿QQ好友列表来实现这个效果. ...

  2. [Android学习笔记]Context简单理解

    一.Context是什么?上下文对象,可以理解为一个程序的运行的环境,从中可以获取当前程序的资源:getResources,getAssets 二.常见的Context有哪些?Application ...

  3. C++ 多源码文件简单组织

    C++ 多源码文件简单组织 基本上和C的是一样的,只不过C++的方法要在类中声明.看一个简单实例.ainimal.h  类里面对外公开的信息. 点击(此处)折叠或打开 #ifndef _ANIMAL_ ...

  4. cronjob不跑得原因

    能是环境的不同,能够在cronjob中加个env > /tmp/env.output查看 应用要同一时候输出标准错误合标准输出到一个文件能够&> /tmp/t

  5. JS的类型比较与转换图

    完整比较图:红色:===橙色:==黄色:<= 和 >= 同时成立,== 不成立蓝色:只有 >=绿色:只有 <= https://www.zhihu.com/question/3 ...

  6. hdu 3290 (简单dfs)

    题意:没有儿子的节点所结苹果数是节点的编号,有儿子的所结苹果是儿子数量(k+1)/2个,求跟节点的苹果数 直接递归一下,先求出所有儿子的苹果树,在排序,,刚开始以为1就是根节点,根节点不确定,, #i ...

  7. stm32 ARM中的RO、RW和ZI DATA

    一直以来对于ARM体系中所描述的RO,RW和ZI数据存在似是而非的理解,这段时间对其仔细了解了一番,发现了一些规律,理解了一些以前书本上有的但是不理解的东西,我想应该有不少人也有和我同样的困惑,因此将 ...

  8. OC 获取城市首字母

    解析依据文件中面的内容,读入一个城市,输出所在首字母 比方读入 长春 输出 c 读入 北京 输出 b 不知道文本中的字体是什么格式 读取文件时 程序不能正确执行 运用oc中的字典 initWithOb ...

  9. Linux进程间通信(九)---综合实验之有名管道通信实验

    实验目的 通过编写有名管道多路通信实验,进一步掌握管道的创建.读写等操作,同时复习使用select()函数实现管道的通信. 实验内容 这里采用管道函数创建有名管道(不是在控制台下输入命令mknod), ...

  10. wampserver图标黄色

    wampserver图标黄色(多个httpd.exe服务,以前装了apache) 服务--->httpd.exe右击这个服务打开文件位置就知道是不是wampserver的服务.如果不是就停掉这给 ...