oracle电梯案例,通过JS完成电梯动画效果

电梯

border-style: solid;

margin-top: 300px;

width: 200px;

}

😀  当前所在楼层:

冲！！！ 

降！！！

使电梯到1楼 

使电梯到2楼 

使电梯到3楼

functiongetTop(){

let dt= document.getElementById("dianti");

let computedStyle= getComputedStyle(dt, null);

let num= 0;for(let i = 0; i < computedStyle.marginTop.length - 2; i++){

num*= 10;

num+=parseInt(computedStyle.marginTop[i]);

}returnnum;

}var Interval = null;var floor = 1;

document.getElementById("diantival").innerText =floor;functionchange(val){

let timer= 0;if(floor == 1 && val > 1){

let temp= (val - floor) * 100;

Interval= setInterval(function(){

let len=getTop();if(len == 0){return}

len--;

timer++;if(timer ==temp){

clearInterval(Interval);

document.getElementById("diantival").innerText =val;

}

document.getElementById("dianti").style.marginTop = len + 'px';

},50);

}else if(floor == 2){

let temp= 100;if(val == 1){

Interval= setInterval(function(){

let len=getTop();if(len == 300){return}

len++;

timer++;if(timer ==temp){

clearInterval(Interval);

document.getElementById("diantival").innerText =val;

}

document.getElementById("dianti").style.marginTop = len + 'px';

},50);

}else if(val == 3){

Interval= setInterval(function(){

let len=getTop();if(len == 0){return}

len--;

timer++;if(timer ==temp){

clearInterval(Interval);

document.getElementById("diantival").innerText =val;

}

document.getElementById("dianti").style.marginTop = len + 'px';

},50);

}

}else if(floor == 3){

let temp= (floor - val) * 100;

Interval= setInterval(function(){

let len=getTop();if(len == 300){return}

len++;

timer++;if(timer ==temp){

clearInterval(Interval);

document.getElementById("diantival").innerText =val;

}

document.getElementById("dianti").style.marginTop = len + 'px';

},50);

}

floor=val;

}functionrise(){

setInterval(_rise,100);

}functionfull(){

setInterval(_full,100);

}function_rise(){

let len=getTop();if(len == 0){return}

len--;

document.getElementById("dianti").style.marginTop = len + 'px';

}function_full(){

let len=parseInt(getTop());if(len == 300){return}

len+=1;

document.getElementById("dianti").style.marginTop = len + 'px';

}