<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var obox=document.getElementById("box");
document.getElementById("btn").onclick=function(){
stratMove(obox,300,‘width‘)
}
}
function stratMove(obj,iTarget,attr){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var iCur=parseInt(getStyle(obj,attr));
var ispeed=(iTarget-iCur)/8;
ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
obj.style[attr]=ispeed+iCur+"px";
document.getElementById("txt").value=obj.style[attr]
},30);
}
function getStyle(obj,attr){
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr];
}
}
</script>
<style type="text/css">
#box{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<input type="text" name="txt" id="txt" value=""/>
<input type="button" name="btn" id="btn" value="开始" />
<div id="box">
</div>
</body>
</html>
原文：http://www.cnblogs.com/biao-123/p/6528302.html