利用前端技术编写龟兔赛跑小动画
基于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图，所以会一直循环，但是效果就是这样的效果。（技术有限，欢迎各位大佬指点吐槽！）
转载：https://blog.csdn.net/zZZxiaozhi/article/details/101147727
查看评论