js运动与变化

<script type="text/javascript">
window.onload = function(){
// 1.抓取元素
var box = document.getElementById("box");
// 7.为了让我清理定时器和执行的定时器是同一个定时器
var timer;
// 9.如果我们想让他反复变化
var num=1;


// 2.给元素添加鼠标移入事件
box.onmouseover = function(){

// 6.为了防止定时器叠加,需要先清理定时器
clearInterval(timer)

// 3.设置定时器
timer=setInterval(function(){
// 4.获取元素旧的宽度
var oldW = parseInt(box.style.width);
// 5.设置新的宽度
box.style.width = oldW+num+'px';
// 8.当到达某一个界限时我们让他清理定时器
if(oldW >=500){
// clearInterval(timer);
// 10.当旧的宽度大于等于500的时候我们让num变成-1,
// 这样他就会返回走
num=-1;
}else if(oldW<=200){
// 11.当旧的宽度小于等于200的时候我们让num变成1,
// 这样他就会返回走
num=1;
}


},10)
}
}

</script>

html.///

<div id="box" style="width: 200px;height: 200px;background: yellow;">

</div>