首页 > 代码库 > js模拟电梯操作

js模拟电梯操作

2024-09-19 21:43:39   216人阅读

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         *{
 8             margin:0;
 9             padding:0;
10         }
11         #box{
12             width:100px;
13             height:400px;
14             margin:0 auto;
15             background: rosybrown;
16             position: relative;
17         }
18         #boxchild{
19             width:100px;
20             height:100px;
21             line-height: 100px;
22             background: red;
23             text-align: center;
24             position: absolute;
25             top:300px;
26         }
27         p{
28             width:100px;
29             height:100px;
30             display: flex;
31             flex-direction: column;
32             justify-content: space-around;
33             align-items: center;
34         }
35         span{
36             width:20px;
37             height:20px;
38             cursor: pointer;
39             line-height: 20px;
40             text-align: center;
41             background: yellow;
42             border-radius: 50%;
43         }
44     </style>
45 </head>
46 <body>
47 <div id="box">
48     <div id="boxchild">
49         <p>
50         <span onclick="change()">1</span>
51         <span onclick="change()">2</span>
52         <span onclick="change()">3</span>
53         <span onclick="change()">4</span>
54         </p>
55     </div>
56 </div>
57 <script type="text/javascript">
58         var spanNode = document.getElementsByTagName("span");
59         var divNode = document.getElementById("boxchild");
60         for (var i = 0; i < spanNode.length; i++) {
61             spanNode[i].onclick = function () {
62                 var index = this.innerText;
63                 change(index);
64             }
65         }
66         function change(index) {
67             var t = 300-(index-1)*100;
68             divNode.style.top= t + "px";
69         }
70 </script>
71 </body>
72 </html>

技术分享

应该是可以做成立体的

js模拟电梯操作


联系
我们