定时器/龟兔赛跑

最新推荐文章于 2025-05-27 21:13:42 发布

前端学习小分队

最新推荐文章于 2025-05-27 21:13:42 发布

阅读量498

点赞数

文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/weixin_45215652/article/details/121518412

版权

点击按钮可以使方块开始运动，可以开发龟兔赛跑小游戏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#box1{
				width:100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
			}
			#box2{
				width:100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left: 0;
				top:200px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				
				
				var box1 = document.getElementById("box1");
				// 获取btn01
				var btn01 = document.getElementById("btn01");
				// 获取btn01
				var btn02 = document.getElementById("btn02");
				// var timer;
				
				btn01.onclick = function(){			
					move(box1,"left",800,20);					
				};
				btn02.onclick = function(){
					move(box1,"left",0,10);							
				};
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					move(box2,"left",800,10);
					
				};
				var btn03 = document.getElementById("btn04");
				btn04.onclick = function(){
					move(box2,"height",800,10);
					
				};
				// var timer;
				// 简单动画函数
				// obj:要执行动画的对象
				// attr:执行动画的样式(left top hight width)
				// target:执行动画的目标位置
				// speed:移动速度(正右 负左)
				function move(obj,attr,target,speed){
					// 关闭上一个定时器
							clearInterval(obj.timer);
							
							// 获取元素目前位置
							var current = parseInt(getStyle(obj,attr));
							// 0-800时speed为正
							// 800-0时speed为负
							if(current>target){
								speed = -speed;
							}
							
							// 开启定时器
							obj.timer = setInterval(function(){
								
							// 获取box2的left值
							var oldValue = parseInt(getStyle(obj,attr));
							// 加10
							var newValue = oldValue + speed;
							if((speed <0 && newValue<target) || (speed > 0 && newValue > target)){
								newValue = target;
							}
							// 新值给box2
							obj.style[attr] = newValue + "px";
							if(newValue == target){
								clearInterval(obj.timer);
							}
						},30);
					};
				}
					// 获取当前显示样式
					function getStyle(obj,name){
						if(window.getComputedStyle){
							return getComputedStyle(obj,null)[name];
						}else{
							return obj.currentStyle[name];
						}
					}
		</script>
	</head>
	<body>
		<button id="btn01">box1向右移动</button>
		<button id="btn02">box1向左移动</button>
		<button id="btn03">box2向右移动</button>
		<button id="btn04">测试</button>
		<br/>
		<br/>
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>