<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
border: double cornflowerblue 1px;
height: 500px;
width: 700px;
}
#div1{
height: auto;
width:700px;
position: relative;
left: 400px;
top: 100px;
}
#img1{
width: 50px;height: 50px;position: absolute;top: 100px;left: 1px;
}
</style>
</head>
<body>
<div id="div1">
<header style="text-align: center;">龟兔赛跑</header>
<div id="box">
<input type="button" name="start" id="start" value="开始" onclick="start1()"/>
<input type="button" name="ends" id="ends" value="暂停" onclick="ends()"/>
<input type="button" name="restart" id="restart" value="刷新" onclick="restart()" />
<img src="1.jpg" id="img1" onclick="fast1(this)"/>
<img src="2.jpg" id='img2' style="width: 50px;height: 50px;position: absolute;top: 300px;left: 1px;" onclick="fast(this)"/>
</div>
</div>
<script type="text/javascript">
var start
var t;
var r;
var x = 15;
var y = 20;
function run(){
t = document.getElementById('img1')
r = document.getElementById('img2').style
if (parseInt(t.style.left)>=650 || parseInt(r.left)>630){
t.style.left = t.offsetLeft+0+'px';
r.left = parseInt(r.left)+0+'px';
clearInterval(start);
}
else{
r.left = parseInt(r.left) + x +'px'
t.style.left = t.offsetLeft+ y +'px';
}
}
function fast(){
x = x+5
}
function fast1(){
y = y+5
}
function start1(){
clearInterval(start);
start = setInterval (run,300);
}
function ends(){
clearInterval(start);
}
function restart(){
window.location.reload()
}
function e(){
if (parseInt(t.left)>700){
t.style.left = t.offsetLeft+0+'px';
clearInterval(start);
}
}
</script>
</body>
</html>
龟兔赛跑
最新推荐文章于 2020-07-23 13:59:33 发布