原创

js实现电梯运行逻辑


代码如下

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>电梯案例</title>
  <style>
    #floor,.instructions{
      width: 100px;
      margin: auto;
      border: 1px solid #f0f0f0;
      padding: 10px 0;
    }
    .instructions{
      text-align: center;
    }
    #floor>button{
      display: block;
      margin: 5px auto;
    }
    #floor>button.on{
      background: red;
    }
    #floor>button.in{
      background: #ffc600!important;
    }
  </style>
</head>
<body>
<div class="instructions">
  <strong id="this_position">当前所在层数</strong>&nbsp;&nbsp;
  <strong id="direction">电梯状态↑↓-</strong>
</div>
<div id="floor"></div>
<!--<p>单击选择前往楼层数</p>-->
<!--<p>双击取消所选楼层</p>-->
</body>
<script>
  function Elevator(layerArr,thisPosition) {
    this.layerArr = layerArr // 电梯层数
    this.thisPosition = thisPosition // 当前所在层数
    this.taskArrT = [] // 往上走的任务
    this.taskArrB = [] // 往下走的任务

    this.direction = 0 // 运行方向 -1下 0停止 1向上
    this.running = null
    this.timeout = null
    var that = this
    //初始化楼层信息
    this.init = function () {
      var layerNodes = document.createDocumentFragment()
      for (var i = that.layerArr[1]; i >= that.layerArr[0]; i--) {
        if (i===0)continue
        var layerDom = document.createElement("button")
        layerDom.innerText = i
        if (i===that.thisPosition) layerDom.className = "in"
        layerDom.setAttribute("layerNum",i)
        layerDom.onclick = selectLayer
        layerNodes.append(layerDom)
      }
      document.getElementById("floor").appendChild(layerNodes)
      document.getElementById("this_position").innerText = thisPosition
      status()
    }
    function selectLayer(e) {
      var layerNum = ~~e.target.getAttribute("layerNum")
      if (layerNum === that.thisPosition) return
      if (that.taskArrT.indexOf(layerNum) === -1 && that.taskArrB.indexOf(layerNum) === -1 ){
        //方向
        if (that.direction === 0)
          that.direction = layerNum > that.direction ? 1 : -1
        // 站队
        if (layerNum > that.thisPosition){
          that.taskArrT.push(layerNum)
          that.taskArrT.sort(function (a,b) {return a-b})
        } else if (layerNum < that.thisPosition) {
          that.taskArrB.push(layerNum)
          that.taskArrB.sort(function (a,b) {
            return b-a
          })
          // that.taskArrB.reverse()
        } else {
          console.log("当前按下等于")
        }
        this.classList.add("on")
        console.log(that.taskArrT,that.taskArrB)
        if (!that.running){
          that.running = true
          run()
        }
      }
    }
    // 电梯状态
    function status() {
      if (that.taskArrB.length ===0 && that.taskArrT.length>0)
        that.direction = 1
      else if (that.taskArrT.length ===0 && that.taskArrB.length>0)
        that.direction = -1

      document.getElementById("direction").innerText = {
        "-1": "↓",
        "0": "-",
        "1": "↑"
      }[that.direction]
    }
    // 改变当前所在位置
    function changePosition() {
      document.getElementById("this_position").innerText = that.thisPosition
      document.getElementsByClassName('in')[0].className=""
      var layerDomArr = document.getElementById("floor").getElementsByTagName("button")
      for (var i = 0; i < layerDomArr.length; i++) {
        var layerNum = ~~layerDomArr[i].getAttribute("layerNum")
        if (layerNum===that.thisPosition) layerDomArr[i].className = "in"
      }
    }
    // 到达
    function arrive(arrName) {
      if (that.thisPosition === that[arrName][0]){
        // 到达目的地 移除
        that[arrName].splice(0,1)
        var layerDomArr = document.getElementById("floor").getElementsByTagName("button")
        for (var i = 0; i < layerDomArr.length; i++) {
          var layerNum = ~~layerDomArr[i].layerNum
          if (layerNum===that.thisPosition) layerDomArr[i].classList.remove("on")
        }
      }
    }
    function run() {
      setTimeout(function () {
        status()
        if (that.direction === 1){//向上
          that.thisPosition += 1
          if (that.thisPosition === 0) that.thisPosition = 1
          arrive("taskArrT")
        } else if (that.direction===-1){//向下
          if (--that.thisPosition === 0) that.thisPosition = -1
          arrive("taskArrB")
        }else {
          console.log("-")
        }
        changePosition()
        if (that.taskArrT.length===0&&that.taskArrB.length===0){
          that.running = false
          that.direction = 0
          status()
        } else {
          run()
        }
      },1000)
    }
  }
  var elevator = new Elevator([-2,5],1)
  elevator.init()
</script>
</html>

demo地址

https://web03-1252477692.cos.ap-guangzhou.myqcloud.com/blog/demo/%E7%94%B5%E6%A2%AF.html

JavaScript
html
  • 作者:零三(联系作者)
  • 最后更新时间:2020-06-30 10:33
  • 版权声明:自由转载-非商用-非衍生-保持署名
  • 转载声明:来源地址 https://web03.cn