<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
//获取ID为box的div
var obox=document.getElementById("box");
//为btn按钮添加点击事件
document.getElementById("btn").onclick=function(){
//为这个obox添加一个定时器
obox.timer=null;
//调用函数StratMove
StratMove(obox,‘width‘,300);
}
}
function StratMove(obj,attr,iTarget){
//每次点击btn的时候先停止上次的定时器
clearInterval(obj.timer);
//重新开启一个定时器
obj.timer=setInterval(function(){
//调用函数getStyle
//因为getStyle得到的是一个字符串含有px单位,假如不用parseInt,后面的数值相加得到的是NaN
var Get=parseInt(getStyle(obj,attr));
//假如obox的width==iTarget,则停止计时器
if(Get==iTarget){
clearInterval(obj.timer);
}
else{
obj.style[attr]=Get+10+‘px‘;
}
},30);
}
function getStyle(obj,attr){
if(obj.currentStyle){
//IE
return obj.currentStyle[attr];
}
else{
//FF
return getComputedStyle(obj,false)[attr];
}
}
</script>
<style type="text/css">
#box{
width:100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<input type="button" name="btn" id="btn" value="开始" />
<div id="box">
</div>
</body>
</html>
原文：http://www.cnblogs.com/biao-123/p/6523372.html