<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="layui/css/layui.css">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<title>电梯模拟程序</title>
<style>
.wrap{width: 1000px;background: #e2e2e2;margin:0 auto;padding:20px 100px 20px;position: relative;}
.box{width: 50px; height: 50px;background: #5FB878;}
.building{
left:250px;width: 400px; height: 600px;border:#333 1px solid; text-align: center;
flex-wrap:nowrap; table-layout:fixed;word-break:break-all;border-collapse:collapse;
background: #eee;
}
.panel{width:220px;height: 130px;background: #eee;float:left; position:absolute;left:800px;top:470px;padding: 10px;}
table tr td{border:#333 1px solid; }
table tr td:nth-child(2){width: 100px;height: 60px;} /*固定宽高*/
.btn{width:30px;height:30px; margin:5px;}
.red{color:red;font-size: 150%;}
.myicon{font-size:30px; color:#5FB878}
.btn1{width: 50px;height: 30px;}
#man{float: left;position: absolute;left:270px;top:570px;width:60px;height:60px;background: pink;text-align: center;
line-height: 60px;
}/*top:570px;乘电梯人在一楼等待*/
#move{float:right;right: 200px;position: absolute;}
</style>
<script>
var keys=new Array(),num,n,txt,currentLayer,nextLayer,upDown=true;
var tops=[570,509,448,387,326,265,204,143,82,21];
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){//显示当前时间
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
$(document).ready(function()
{
$('#up').css("color","red");//电梯向上运行
$("button").click(function(){
var inList=false;
num=Number(this.innerText);
if(keys.length==0) {//队列空直接加，判断按键在不在如不在keys列表中，将其加到队尾
keys[0]=num;
}
else{
for (let index = 0; index < keys.length; index++) {
if (keys[index]==num){inList=true;break;};
}
if (!inList) keys[keys.length]=num;
}
$(this).css("color","red");
// alert(keys);
console.log(keys);
});
$("#move").click(function(){
// $('#man').css("top",tops[0]);
// console.log(keys);
// for (let index = 0; index < keys.length; index++) {
// console.log(tops[keys[index]-1]);
// $("#man").animate({top:tops[keys[index]-1]},1000);
// }
$("#man").animate({top:tops[2]},1000);
});
});
</script>
</head>
<body>
<div class="wrap">
<table class="building">
<tr><td></td><td id="layer10"></td><td></td></tr>
<tr><td></td><td id="layer09"></td><td></td></tr>
<tr><td></td><td id="layer08"></td><td></td></tr>
<tr><td></td><td id="layer07"></td><td></td></tr>
<tr><td></td><td id="layer06"></td><td></td></tr>
<tr><td></td><td id="layer05"></td><td></td></tr>
<tr><td></td><td id="layer04"></td><td></td></tr>
<tr><td></td><td id="layer03"></td><td></td></tr>
<tr><td></td><td id="layer02"></td><td></td></tr>
<tr><td></td><td id="layer01"></td><td></td></tr>
</table>
<div class="panel">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
<button class="btn">8</button>
<button class="btn">9</button>
<button class="btn">10</button>
<input type="button" value="up" class="btn" id="up"/>
<input type="button" value="down" class="btn1" id="down"/>
<span id="demo"></span>
</div>
<div id="man"><i class="layui-icon myicon"></i></div>
<input type="button" value="move" id="move"/>
</div>
</body>
</html>
原创文章，作者：sunnyman218，如若转载，请注明出处：https://blog.ytso.com/275022.html