實習單位要求做一個在Vue項目中比較能適配的來反映貨梯當前狀況的頁面效果
用JS寫了一個
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>電梯</title>
<style>
div.solid {
border-style: solid;
margin-top: 300px;
width: 200px;
}
</style>
</head>
<body>
<div style="height: 500px;">
<div class="solid" id='dianti'>😀 <span>當前所在樓層:</span><span id = 'diantival'></span></div>
<div style="position: fixed; bottom: 300px;">
<div>
<br/>
<button onclick="rise()">沖！！！</button>
<button onclick="full()">降！！！</button>
</div>
<div>
<br/>
<button onclick="change(1)">使電梯到1樓</button> 
<button onclick="change(2)">使電梯到2樓</button> 
<button onclick="change(3)">使電梯到3樓</button>
</div>
</div>
</div>
<script>
function getTop(){
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]);
}
return num;
}
var Interval = null;
var floor = 1;
document.getElementById("diantival").innerText = floor;
function change(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;
}
function rise(){
setInterval(_rise, 100);
}
function full(){
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';
}
</script>
</body>
</html>