用js模拟电梯升降

<!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">&#xe684;</i></div>          
        <input type="button" value="move" id="move"/>
    </div>
  
</body>
</html>