提问：JS中匀速向右移动，为何无法停止。

最新推荐文章于 2022-09-18 12:37:16 发布

怪瘦就是我

最新推荐文章于 2022-09-18 12:37:16 发布

阅读量156

点赞数

分类专栏： javaScript 文章标签： JavaScirpt 小白提问

本文链接：https://blog.csdn.net/pipixian2/article/details/102719798

版权

javaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS中匀速向右移动，为何无法停止。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>匀速运动</title>
	</head>
	<style type="text/css">
		* {
			padding: 0px;
			margin: 0px;
		}

		.div {
			width: 200px;
			height: 200px;
			background: red;
			position: relative;
			top: 0px;
			left: 0px;
		}
	</style>
	
	<body>
		<input type="button" id="btn1" value="点击开始移动" onclick="startMove()">
		<div class="div"></div>
		
		<script type="text/javascript">
			// window.onload = function() {
			var timer = null;
				function startMove() {
					var Div = document.getElementsByClassName('div')[0];
					clearInterval(timer);
					 timer = setInterval(function() {
						var speed = 2;
						if (Div.offsetLeft == 300) {
							clearInterval(timer);
						} 
						else {
							Div.style.left = Div.offsetLeft + speed + "px";
						}
						//输出其左侧距离
						console.log(Div.offsetLeft)
					}, 30);
				}
			// }
		</script>
	</body>
</html>

运行结果
2能被100整除，但运行之后发现并没有按照设定的那样在100px处停止。
处理方法
添加console.log(Div.offsetLeft)，输出每次运动左侧距离
运行获得每次运动候的结果
demo24_01.html:41 3
demo24_01.html:41 5
demo24_01.html:41 8
demo24_01.html:41 11
demo24_01.html:41 14
demo24_01.html:41 17
demo24_01.html:41 20
demo24_01.html:41 23
demo24_01.html:41 26
demo24_01.html:41 29
demo24_01.html:41 32
demo24_01.html:41 35
demo24_01.html:41 38
demo24_01.html:41 41
demo24_01.html:41 44
demo24_01.html:41 47
demo24_01.html:41 50
demo24_01.html:41 53
demo24_01.html:41 56
demo24_01.html:41 59
demo24_01.html:41 62
demo24_01.html:41 65
demo24_01.html:41 68
demo24_01.html:41 71
demo24_01.html:41 74
demo24_01.html:41 77
demo24_01.html:41 80
demo24_01.html:41 83
demo24_01.html:41 86
demo24_01.html:41 89
demo24_01.html:41 92
demo24_01.html:41 95
demo24_01.html:41 98
demo24_01.html:41 101
demo24_01.html:41 104
demo24_01.html:41 107