电梯模拟

2022-07-17 22:10:30 阅读：116 来源： 互联网

标签：index keys top height width 电梯 var 模拟

<!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>

标签：index,keys,top,height,width,电梯,var,模拟
来源： https://www.cnblogs.com/hnqyliu/p/16488587.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

电梯模拟