由

Question

我想为Web应用程序创建电池指示器。我使用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/>元素以使指示器从上到下跟踪的效果。然后，您可以翻转width和height的值来获得“立式电池”的尺寸。

最后，要使进度元素随着电池电量的变化而更新，应在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>