javascript - 进度条从下到上控制

Question

我想为网络应用程序创建电池指示器。我使用 progress 栏标签。问题是它从左到右开始，而我想从下到上。第二个问题是 JavaScript 似乎没有改变任何东西。如何解决这个问题？ 注意:我已经读过这个答案:Progress Bar Fill Up Bottom-To-Top 这没有使用进度标签: How to show a vertical progress bar from bottom to top

 navigator.getBattery().then(function(battery) {
  battery.addEventListener('levelchange', function() {    
   document.getElementById('bat').innerHTML=((battery.level*100));
  })
   document.getElementById('bat').innerHTML=((battery.level*100));
});

progress#bat{
    
    position:absolute;
    top:5vh;
    right:5vh;
    height:90vh;
    border:none;
    background-color:black;
    color:red;
}

<div class='window' id='battery'>
<p id='batLevel'>BatteryLevel</p>
    <progress max='100' value="22" id='bat'></progress>
</div>

Answer 1

要解决进度指示器的“从上到下”方向问题，一种解决方案是以这种方式使用 CSS 转换:

transform:rotate(90deg);

这将产生旋转 <progress/> 的效果元素使指示器从上到下跟踪。然后，您可以翻转宽度和高度的值以获得“直立电池”的尺寸。

最后，要使进度元素随着电池电量的变化而更新，您应该设置 value bat 上的字段元素而不是 innerHTML正如您目前要实现的自动更新，如下所示:

navigator.getBattery().then(function(battery) {

  battery.addEventListener('levelchange', function() {    
  
    /* Apply battery.level * 100 to value field to cause 
       bat element to update as expected */
    document.getElementById('bat').value = battery.level * 100;
  });
  
  /* Apply battery.level * 100 to value field to cause 
     bat element to update as expected */
  document.getElementById('bat').value = battery.level * 100;
});

progress#bat{
    
    position:absolute;
    top:5rem;
    left:1rem;
    border:none;
    background-color:black;
    color:red;
    
    transform:rotate(90deg); /* rotation flips 
                perception of width and height */
                
    height:4rem; /* height appears to be width */
    width:9rem;  /* width appears to be height */
}

<div>
  <progress max='100' value="12" id='bat'></progress>
</div>