javascript---之自由落体运动实现

最新推荐文章于 2022-07-13 08:05:27 发布

zz410675629

最新推荐文章于 2022-07-13 08:05:27 发布

阅读量2.5k

点赞数

分类专栏： javascript基础学习

本文链接：https://blog.csdn.net/zz410675629/article/details/27824957

版权

本文介绍了使用JavaScript实现自由落体运动的关键属性，包括clientHeight、offsetHeight和offsetTop，并提供了一个简单的demo示例，同时强调了如何清除定时器以避免多次点击事件的发生。

摘要由CSDN通过智能技术生成

实现自由落体运动需要理解的几个简单属性：

clientHeight：浏览器客户端整体高度

offsetHeight：对象（比如div）的高度

offsetTop：对象离客户端最顶端的距离

简单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.οnlοad=function  () {
			var btn=document.getElementById('btn');
			var div1=document.getElementById('div1');

			var Time=null;
			var speed=0;
			btn.οnclick=function () {
				startMove();
			}

			function startMove () {
				clearInterval(Time);
				Time=setInterval(function(){
					speed+= 3;
					var T = div1.offsetTo