龟兔赛跑网页版

最新推荐文章于 2022-03-23 12:06:57 发布

xiaozhi_小志

最新推荐文章于 2022-03-23 12:06:57 发布

阅读量376

点赞数 2

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/zZZxiaozhi/article/details/101147727

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

利用前端技术编写龟兔赛跑小动画

基于JavaScript的事件监听处理

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="../css/mystyle.css" />
		<script type="text/javascript" src="../js/myjs.js" ></script>
	</head>
	<body> 
	
		<div id="map">
			<input type="button" value="开始" οnclick="start()"/>    
		</div>
		
		<img id="t" src="../img/tortoise.png" />
		<img id="r" src="../img/rabbit.png"/>
		
		<div id="result">
			兔子赢了！！！
		</div>
		
	</body>
</html>

CSS代码

#map{
	width: 800px;
	height: 400px;
	position: absolute;
	background-image: url(../img/background.jpg);
	left: 200px;
	top: 100px;
	border: solid 1px #2E8B57;
	text-align: center;
}
img{
	display: none;
	position: absolute;
	width: 32px;
	height: 32pxs;
}
#result{
	font-size: 25px;
	font-family: "楷体";
	margin-top: 50px;
	margin-left: 500px;
	display: none;
}

JS代码

var backgroundObj = -1;

function start(){
	if(backgroundObj!=-1){
		clearInterval(backgroundObj)
	}

	t = document.getElementById('t');
	r = document.getElementById('r');
	result = document.getElementById('result')

	t.style.left = '200px';
	t.style.top = '200px';
	
	
	r.style.left = '200px';
	r.style.top = '400px';
	
	t.style.display = 'block'
	r.style.display = 'block'
	result.style.display = 'none'
	
	setInterval(move, 100)
}

function move(){
	t = document.getElementById('t');
	r = document.getElementById('r');
	
	r_left = r.style.left
	t_left = t.style.left
	
	r_left = Number.parseInt(r_left.split('px')[0])
	t_left = Number.parseInt(t_left.split('px')[0])
	
	r_left += 7
	t_left += 5
	
	t.style.left = t_left + 'px';
	r.style.left = r_left + 'px';
	
	
	if(r_left >= 960 | t_left >= 960){
		clearInterval(backgroundObj)
		backgroundObj = -1
		result.style.display = "block"		
}

下面是浏览器运行结果：
这个运行结果大概就是这样，因为这是GIF图，所以会一直循环，但是效果就是这样的效果。（技术有限，欢迎各位大佬指点吐槽！）

xiaozhi_小志

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
龟兔赛跑网页版

利用前端技术编写龟兔赛跑小动画基于JavaScript的事件监听处理HTML代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="../css/myst...
复制链接

扫一扫