js的盒子运动效果

今天写一些盒子的运动效果,运用js来实现
window.onload = function (){
singe2();  //调用这个函数
singe3();
singe4();
singe5();
}
function singe2(){ //单个物体匀速运动
var div1 = document.getElementById('div1');
div1.onmouseover = function(){
clearInterval(div1.timer); //保证定时器每次只开一个
div1.timer = setInterval(function(){
if (div1.offsetWidth > 800) {
clearInterval(div1.timer);
}else{
div1.style.width = div1.offsetWidth + 10 + 'px';
}
},30);

}
div1.onmouseout = function(){
clearInterval(div1.timer);
div1.timer = setInterval(function(){
if (div1.offsetWidth <= 300) {
clearInterval(div1.timer);
}else{
div1.style.width = div1.offsetWidth - 10 + 'px';
}
},30);

}
}

function　singe3(){
var div3 = document.getElementById('div3');
div3.onmouseover = function(){  
clearInterval(this.time);
clearInterval(this.timer);
div3.time = setInterval(function(){  //两个定时器同时一起运动
if (div3.offsetWidth > 600) {
clearInterval(div3.time)
}else{
div3.style.width = div3.offsetWidth + 20 + 'px';
}
},30)

div3.timer = setInterval(function(){//定时器不会影响主要的功能
if (div3.offsetHeight > 300) {
clearInterval(div3.timer)
}else{
div3.style.height = div3.offsetHeight + 10 + 'px';
}
},30)
}
div3.onmouseout = function(){
clearInterval(this.time);
clearInterval(this.timer);
this.time = setInterval(function(){
if (div3.offsetWidth <= 300) {
clearInterval(div3.time);
}else{
div3.style.width = div3.offsetWidth - 20 + 'px';
}
},30);
this.timer = setInterval(function(){
if (div3.offsetHeight<= 100) {
clearInterval(div3.timer);
}else{
div3.style.height = div3.offsetHeight - 10 + 'px';
}
},30);
}
}


function singe4() {
var div4 = document.getElementById('div4');
div4.onmouseover = function(){
clearInterval(div4.time)
div4.time = setInterval(function(){
if (div4.offsetWidth > 600) { 
if (div4.offsetHeight> 300) {
clearInterval(div4.time);
}else{
div4.style.height = div4.offsetHeight + 10 + 'px';
}


}else{
div4.style.width = div4.offsetWidth + 10 + 'px';
}
},30)
}
div4.onmouseout = function(){
clearInterval(div4.time)
div4.time = setInterval(function(){
if (div4.offsetWidth <= 300) {

if (div4.offsetHeight < 100) {
clearInterval(div4.time)
}else{
div4.style.height = div4.offsetHeight - 10 + 'px';
}
}else{
div4.style.width = div4.offsetWidth - 10 + 'px';
}
},30)
}
}


function singe5() {
var div5 = document.getElementById('div5');
div5.onmouseover = function (){
clearInterval(div5.time);  //进去,出来都要加,如果一上来不加定时器,到时候会开多个定时器,到时候会出现一个加一个减,导致不动
div5.time = setInterval(function(){
if (div5.offsetWidth>1000) {
clearInterval(div5.time);
}else{
var speed = (1000-div5.offsetWidth)/8; //最终位置减掉现在位置除以速度
speed = Math.ceil(speed); // 向上取整,加最大的数 0-1之间的数取1
div5.style.width = div5.offsetWidth + speed + 'px';
}
},30);
}
div5.onmouseout = function (){
clearInterval(div5.time);  
div5.time = setInterval(function(){
if (div5.offsetWidth<=300) {
clearInterval(div5.time);


}else{
var speed = (300-div5.offsetWidth)/8;
speed = Math.floor(speed); //向下取整 0-1之间  取0
div5.style.width = div5.offsetWidth + speed + 'px';
}
},30);
}
}

//css的样式
<div style="width:300px;height:100px;background:red;" id="div1">
情景二:没有边框的物体的单一属性的匀速运动
</div>


<div style="width:300px;height:100px;background:red;" id="div3">
情景三:物体多个属性同时匀速运动
</div>


<div style="width:300px;height:100px;background:red;" id="div4">
情景四:物体多个属性链式匀速运动
</div>


<div style="width:300px;height:100px;background:red;" id="div5">
情景五:物体的单个属性的变速运动
</div>