js实现网页龟兔赛跑动画--------原理

最新推荐文章于 2021-01-11 18:05:20 发布

xiuxiuxiulai

最新推荐文章于 2021-01-11 18:05:20 发布

阅读量526

点赞数 1

分类专栏： HTML JS 文章标签： HTML JS动画

本文链接：https://blog.csdn.net/xiuxiuxiulai/article/details/101169984

版权

该博客简要介绍了如何使用JavaScript实现网页上的龟兔赛跑动画，旨在帮助读者熟悉JavaScript的运用。虽然通常CSS和JS应分别放在独立文件中引用，但由于内容简洁，作者在此将其合并在了一起。

摘要由CSDN通过智能技术生成

本编文章只是简要的说明了一下龟兔赛跑原理，目的是为了熟悉js的使用，CSS和JS应该建立两个单独文件并引用（业界规范），由于写的东西太少了，我就给放到一起了，?。

实现效果：
在这里插入图片描述
具体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js实现简易龟兔赛跑</title>
	</head>
	<body>
		<div id="map">
			<input type="button" value='开始' onclick="start()" />
		</div>
		<img id = 'r' src="../img/rub.jpg" />
		<img id = 't' src="../img/tur.jpg" />
	</body>
</html>

<style type="text/css">
	#map{
	width:800px ;
	height: 400px;
	position: absolute;
	left: 200px;
	top: 100px;
	border: solid 1px chartreuse;
	text-align: center;
	background-color: floralwhite;
}
img{