用js模拟电梯升降的小程序

本程序小胖空间网址：http://hnqyliu.xiaopangkj.space/dt.html

<!DOCTYPE html>

<head>

<title>js电梯模拟程序</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:750px;top:470px;padding: 10px;}

.panel #demo{margin-left: 18px;}

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;乘电梯人在一楼等待*/

.manClass{float: left; position: absolute;width:60px;height:60px;background: #e2e2e2;text-align: center;line-height: 60px;}

.wrap #move{float:right;right: 100px;position: absolute; display: none;}

.wrap img{float: left; position: absolute;left:715px;top:80px; width: 300px;height: 300px;}

</style>

var keys=new Array(),floor1=1,floor2,upDown=true;

var tops=[570,570,509,448,387,326,265,204,143,82,21];

var myVar=setInterval(function(){myTimer()},1000);

var i=0,x;

let flags=new Array(20).fill(false);

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(){

$(this).css("color","red");

// alert(this.innerHTML);

floor2=Number(this.innerHTML);

flags[floor2]=true;

x=Math.abs(floor2-floor1)*100;

$("#man").animate({top:tops[floor2]},x); //电梯移动

flags[floor2]=false;

floor1=floor2;

});

$("#up").click(function(){

if (floor1<10) {

floor2=floor1+1;

$("#man").animate({top:tops[floor2]},1000);

floor1++;

}

});

$("#down").click(function(){

if (floor1>1) {

floor2=floor1-1;

$("#man").animate({top:tops[floor2]},1000);

floor1--;

}

});

$("#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]},3000);

appendText();

});

function appendText(){

// var txt1="<p>文本-1。</p>"; // 使用 HTML 标签创建文本

// var txt2=$("<p></p>").text("文本-2。"); // 使用 jQuery 创建文本

// var txt3=document.createElement("p");

// txt3.innerHTML="文本-3。"; // 使用 DOM 创建文本 text with DOM

// $("body").append(txt1,txt2,txt3); // 追加新元素

var man1='<div class="manClass" style="left:270px;top:100px;"><i class="layui-icon myicon"></i></div>';

// var man1=$("<p></p>").text("文本-2。");

$(".wrap").append(man1);

// alert($(".manClass").width());

$(".manClass").fadeOut(1000);

// $("body").remove(".manClass");

}

});

</script>

</head>

<body>

</table>

</div>

</div>

</body>

</html>

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

源码下载： https://files-cdn.cnblogs.com/files/hnqyliu/%E7%94%B5%E6%A2%AF.rar?t=1658239538

posted @ 2022-07-19 17:57 paoPaoLong_liu 阅读(175) 评论(0) 收藏举报

刷新页面返回顶部

paoPaoLong_liu

用js模拟电梯升降的小程序

公告