电梯模拟【未完成】

theme: qklhk-chocolate

在正文的第一句加入“我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！”

电梯结构

假如我们以正向透视图去描述，电梯当然包含这些元素： 电梯井 每层的按钮与信号标识， 电梯开关状态，下面就以css+js的方式，模拟实现一个电梯运行的情况

dom结构

• 首先 我们需要一栋楼，我们虽然进不了字节，但是我们可以画一个字节

<div class="floor">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<style>
.floor{
    width: 90vw;
    height: 90vh;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .logo{
    width: 10vw;
    display: block;
    position: absolute;
    top: 5vh;
    left: 5vw;
  }
  .line{
    width: 100%;
    height: 2px;
    position: absolute;
    background: #cecece;
    left: 0;
  }
  .line:nth-of-type(2) {
    top: 20%;
  }
  .line:nth-of-type(3) {
    top: 40%;
  }
  .line:nth-of-type(4) {
    top: 60%;
  }
  .line:nth-of-type(5) {
    top: 80%;
  }
</style>

• 接下来，我们需要一部电梯，电梯分为电梯井，轿厢，每层的开关, door 是每一层的对象，op-box是右侧的操作按钮，left，right是对开的两扇门，这里通过level来标识层数，此处上下按钮⬇️是采用的颜文字，也就是unicode编码里声明的统一的编码。

<div class="elevator-box">
      <div class="door" id="door-5" level="5">
        <div class="op-box">
          <div class="screen">
            <div class="level">1</div>
          </div>
          <div class="op">
            <div class="down" down="1">⬇️</div>
          </div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <div class="door" id="door-4" level="4">
        <div class="op-box">
          <div class="screen">
            <div class="level">1</div>
          </div>
          <div class="op">
            <div class="up active" up="1">⬆️</div>
            <div class="down" down="1">⬇️</div>
          </div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <div class="door" id="door-3" >
        <div class="op-box">
          <div class="screen">
            <div class="level">1</div>
          </div>
          <div class="op">
            <div class="up active" up="1" level="3">⬆️</div>
            <div class="down" down="1" level="3">⬇️</div>
          </div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <div class="door" id="door-2" >
        <div class="op-box">
          <div class="screen">
            <div class="level">1</div>
          </div>
          <div class="op">
            <div class="up active" up="1" level="2">⬆️</div>
            <div class="down" down="1" level="2">⬇️</div>
          </div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <div class="door" id="door-1" >
        <div class="op-box">
          <div class="screen">
            <div class="level">1</div>
          </div>
          <div class="op">
            <div class="up active" up="1" level="1">⬆️</div>
          </div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <div class="elevator"></div>
    </div>
    <style>
    ...
    </style>

点击事件

点击按钮需要判断电梯是否在当前楼层，在，则触发开门动画，判断方向暂未实现，这里需要实现电梯调度的路径最短算法，暂未实现。 这里添加点击事件，然后添加是否开门的判断和点击效果。

 $('.door .op-box .op div').click(function () {
      let l = $(this).attr('level')
      $(this).addClass('shine')
      if (Number(l) === level) {
        $(this).removeClass('shine')
        $(`#door-${l}`).addClass('active')
        setTimeout(function () {
          $(`#door-${l}`).removeClass('active')
        }, 2500)
        return false
      }
    })

轿厢自动上下运行

这里采用定时器的方式实现，并添加一个方向开关来判断什么时候进行方向倒置

let level = 1
let up = true
setInterval(function () {
  if(level>3) {
    up = false
  }
  if (level<1) {
    up =true
  }
  $('.elevator').css('top', 80-20*level + '%')
  $('.level').html(level+1)
  if (up) {
    level++
  } else {
    level--
  }
}, 1500)

这里，残缺版电梯运行就实现完了。