一、HTML
<input type="button" value="开始运动" id="btn1" />
<input type="button" value="停止运动" id="btn2" />
<img src="tt2.png" id="div1" alt="" />
<div id="div2"></div>
<textarea rows="10" cols="30" id="txt"></textarea>
二、CSS
*{
padding: 0px;
margin: 0px;
}
#div1{width:90px;
height:90px;
position:absolute;
top:50px;
left:0;
border-radius: 50%;
}
#div2{
position:absolute;
width:1px;
height:200px;
left:300px;
top:0;
background:black;
}
#txt{
display: block;
position: absolute;
top:200px;
left: 50px;
border: 1px solid black;
}
三、script
var iSpeed=0;
var timer=null;
window.onload=function(){
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
oBtn1.onclick=function(){
startMove();
}
oBtn2.onclick=function(){
clearInterval(timer);
}
}
function startMove()
{
clearInterval(timer);
var oDiv=document.getElementById('div1');
var oTxt=document.getElementById('txt');
timer=setInterval(function (){
iSpeed+=(300-oDiv.offsetLeft)/50;
oTxt.innerHTML+=parseInt(iSpeed)+'-';
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
}, 30);
}
四、效果图
速度图