方块启动停止计时器

@CJL

于 2019-12-21 19:43:13 发布

阅读量192

点赞数

分类专栏：练习文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_44109821/article/details/103647681

版权

练习专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的简单动画案例，通过定时器控制一个黑色方块在页面上从左到右移动，并提供了启动和停止动画的功能。文章详细展示了如何设置元素的样式、使用JavaScript控制元素位置以及如何通过按钮控制动画的开始和暂停。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box {
				width: 40px;
				height: 40px;
				background: #000;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			var timer;
			var box;
			window.onload = function() {
				box = document.getElementById("box")
				timer = setTimeout("move()", 10)
				document.getElementById("btn").onclick = function() {
					if(this.innerText == "启动") {
						this.innerText = "停止"
						timer = setTimeout("move()", 10)
					} else {
						this.innerText = "启动"
						clearTimeout(timer)
					}

				}

			}

			function move() {

				//距离左侧的像素每次增大
				var left = parseInt(box.style.left);
				if(left > 600) {

					left = 50
				}
				console.log(left)
				box.style.left = left + 1 + "px"
				timer=setTimeout("move()", 10)
			}
		</script>
	</head>

	<body>
		<div id="box" style="left: 50px; top: 100px;">

		</div>
		<button id="btn">停止</button>
		<script type="text/javascript">
			//			setTimeout(函数,执行的毫秒数)
			//			这个方法只能够执行一次
			//			clearTimeout()
		</script>
	</body>

</html>