37、JavaScript的运动-----匀速运动

最新推荐文章于 2023-08-10 20:14:15 发布

Bwz_Learning

最新推荐文章于 2023-08-10 20:14:15 发布

阅读量579

点赞数 1

分类专栏： JavaScript_Bak 文章标签： JavaScript JavaScript的运动 DIV的运动

本文链接：https://blog.csdn.net/zbw18297786698/article/details/51721070

版权

JavaScript_Bak 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

1、运动基础

• 让Div运动起来

• 速度——物体运动的快慢

• 运动中的Bug

– 不会停止

– 速度取某些值会无法停止

– 到达位置后再点击还会运动

– 重复点击速度加快

2、匀速运动

• 速度不变

3、运动的原理

• 在开始运动时，关闭已有定时器

• 把运动和停止隔开 (if/else)

4、匀速运动的代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>运动1</title>
		<style type="text/css">
			#div1 {
				width: 100px;
				height: 100px;
				position: absolute;
				background: red;
				left: 0;
				top: 50px;
			}
		</style>
		<script type="text/javascript">
			var timer = null;

			function startMove() {
				var oDiv = document.getElementById('div1');
				/**
				 * 在开始运动前,先清除定时器
				 * 防止多次点击按钮，开多个定时器函数
				 * 因为定时器函数为异步的，这样的话速度会变快
				 */
				clearInterval(timer);
				/**
				 * 用于实现运动的定时器函数 
				 */
				timer = setInterval(function() {
					/**
					 * 因为速度固定，所以是匀速运动
					 */
					var iSpeed = 7;
					/**
					 * 使用if和else，用于区别是否到达终点
					 */
					if (oDiv.offsetLeft >= 300) //是否到达终点,
					{
						//速度为7为301,所以判断条件用oDiv.offsetLeft >= 300，>=
						clearInterval(timer); //到达终点
					} else {
						oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px'; //到达之前
					}
				}, 30);
			}
		</script>
	</head>

	<body>
		<input type="button" value="开始运动" οnclick="startMove()" />
		<div id="div1"></div>
	</body>

</html>