如何实现点击电梯控制按钮时显示所选数字？

步骤1：修改JavaScript逻辑，添加数字显示逻辑 #

在按钮点击事件中，直接将选中的楼层数字更新到页面的显示容器中，同时可以保留历史楼层记录：

var current = 0;

$(document).ready(function(){
  $("#enterPhone button").click(function(){
    var floor = parseInt($(this).data("floor"))
    height = floor*9.5 
    animate = Math.abs(current-floor)*1300;
    if(floor == current) return;
    
    // 更新显示内容：历史楼层+当前选中楼层
    $('[data-previous]').text(current);
    $('[data-current]').text(floor);
    
    $("#rightDoor").removeClass("active-right");
    $("#leftDoor").removeClass("active-left");
    setTimeout(function(){
      $("#elevatorContainer").css("transition","all "+animate+"ms linear");
      $("#elevatorContainer").css("bottom",height+"%");
      current = floor;
      setTimeout(function(){
        $("#rightDoor").addClass("active-right");
        $("#leftDoor").addClass("active-left");
      },animate);
    },350);
  });
});

步骤2：添加显示区域的CSS样式 #

给现有的.output容器添加样式，让它呈现类似屏幕的效果：

#drawing {  
  /* 保留原有样式 */
  
  #enterPhone {
    /* 保留原有样式 */
    
    .output {
      background: #e0e0e0;
      padding: 10px;
      margin: 15px;
      border-radius: 5px;
      text-align: right;
      min-height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      .previous {
        font-size: 14px;
        color: #666;
      }
      
      .current {
        font-size: 24px;
        font-weight: bold;
      }
    }
  }
}

步骤3：确认HTML结构 #

你的HTML已经包含了正确的显示容器，无需额外修改：

<div class="output">
  <div data-previous class="previous"></div>
  <div data-current class="current"></div>
</div>

修改完成后，点击按钮时，选中的楼层数字会立刻显示在.current区域，之前的目标楼层会显示在上方的.previous区域，完全实现你想要的类似计算器的数字显示效果。

内容的提问来源于stack exchange，提问作者yunaoh