<style type="text/css">
#box{
width: 200px;
height: 200px;
background: pink;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="anniu" />
<div id="box"></div>
</body>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
var oBtn = document.getElementById('btn1');
var timer = null;
function move(){
clearInterval(timer);
timer = setInterval(function(){
//缓冲运动 (目标值 - 当前值)/10
var speed = (300 - oBox.offsetLeft)/10;
//判断speed的值是不是需要往上还是往下取整
//speed=speed>0?Math.ceil(speed):Math.floor(speed); //三目运算符
if(speed>0){
//Math.ceil(); 小数点后一位 向上取整
speed = Math.ceil(speed);
}else{
//Math.floor(); 小数点后一位 向下取整
//例子:-0.5 向下取整就是 -1
speed = Math.floor(speed);
}
oBox.style.left = oBox.offsetLeft + speed +'px';
},30)
}
oBtn.onclick = function(){
move();
}
}
</script>