HTML文件代码
<!DOCTYPE html>
<html>
<head>
<title>easeSport.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#div1{width: 150px;height: 150px;background:#CEE;position:absolute;top:50px;left:50px;}
</style>
<script type="text/javascript" src="../js/easeSport.js"></script>
</head>
<body>
<input type="button" value="start sport" id="btn">
<input type="button" value="stop sport" id="btn1">
X:<input type="text" id="txtx" style="20px;">
Y:<input type="text" id="txty" style="20px;">
<div id="div1"></div>
</body>
</html>
js文件代码
window.onload = function(){
var btn = document.getElementById('btn');
var btn1 = document.getElementById('btn1');
var div = document.getElementById('div1');
var txtx = document.getElementById('txtx');
var txty = document.getElementById('txty');
var timer = null;
var speed = 1;
btn.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
if(div.offsetLeft <= 225){
div.style.top = div.offsetTop+speed+'px';
}else if(div.offsetLeft <= 400) {
div.style.top = div.offsetTop-speed+'px';
}
txtx.value = div.offsetLeft;
txty.value = div.offsetTop;
if(div.offsetLeft >= 400){
clearInterval(timer);
}else{
div.style.left = div.offsetLeft+speed+'px';
}
},30);
btn1.onclick = function(){
clearInterval(timer);
}
}
}
