Question

我正在尝试修改此W3Schools示例：

function move() {
  var elem = document.getElementById("myBar");   
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      elem.innerHTML = width * 1  + '%';
    }
  }
}

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}

<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
  <div id="myBar">10%</div>
</div>
<br>
<button onclick="move()">Click Me</button>

（代码来自https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_label_js）

以便进度条的文本（％值）在栏中居中并保持居中，而不是与进度div一起“移动”。

如何使文本显示在div之外？

Answer 1

您需要添加一个绝对元素（#center），该元素具有相同的宽度（left: 0;right: 0;以拉伸到#myBar大小）和行高（line-height: 30px），因此文本与背景栏（#myBar的{{1}}）垂直对齐，将其文本（#myBar）居中，然后将内部文本更改为进度条的宽度（{{1 }}）使用javascript（text-aling: center）

#myProgress

Answer 2

您需要为js中的innerHTML调用创建另一个div元素。对于样式，我创建了一个父div，以确保它显示在栏的同一位置，并创建了居中样式的div百分比。

function move() {
  var elem = document.getElementById("myBar"); 
  var percent = document.getElementById("percent"); 
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      percent.innerHTML = width * 1  + '%';
    }
  }
}

#myProgress {
  width: 100%;
  background-color: #ddd;
  position: relative;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;

}

.parentBlock{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#percent {
 margin: 0 auto;
 display: block;
 width:30px;
 background: red;
 top: 5px;
 position: relative;
}

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div class="parentBlock"><div id="percent">10%</div></div>
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button> 
</body>
</html>

Answer 3

不确定这是否是最佳选择，但这是一个解决方案。基本上，您必须将两个div浮动，并将进度条以绝对的方式放置在myBar div的中心。

<!DOCTYPE html>
<html>
<style>
#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
  float: left;
}

#myBarText {
  float: left;
  position: absolute;
  margin-top: 5px;
  margin-left: 40%;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"></div>
  <div id="myBarText">10%</div>
  <div style="clear: both"></div>
</div>

<br>
<button onclick="move()">Click Me</button> 

<script>
function move() {
  var elem = document.getElementById("myBar");
  var elem2 = document.getElementById("myBarText");   
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      elem2.innerHTML = width * 1  + '%';
    }
  }
}
</script>

</body>
</html>

Answer 4

类似于其他人，但我使它从0开始而不是10：

function move() {
  var elem = document.getElementById("myBar");
  var textAboveBar =document.getElementById("aboveBar");
  var width = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      textAboveBar.innerHTML = width * 1  + '%';
    }
  }
}

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}

#aboveBar{
    text-align:center;
}

<h1>JavaScript Progress Bar</h1>
<div id = "aboveBar">0%</div>
<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Click Me</button>

Answer 5

这是在外面做一个例子。

function move() {
  var elem = document.getElementById("myBar");  
  var ptext = document.getElementById("ptext"); 
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      ptext.innerHTML = width * 1  + '%';
    }
  }
}

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
  position: relative;
  margin-bottom: 10px;
}

#myBar span {
    position: absolute;
    bottom: -26px;
    color: #000;
    right: 15px;
}

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"><span id="ptext">10%</span></div>
</div>

<br>
<button onclick="move()">Click Me</button>

Answer 6

在编写示例时，您将无法实现此操作，因为文本没有与要调整大小的div不同的容器。如果它具有自己的元素（如p标签），则可以执行以下操作：

#myBar p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

#myProgress {
  position: relative;
}

这将使文本相对于#myBar的父容器而不是#myBar本身的位置。 50％样式是将绝对定位的元素居中的简单方法。但是就像我说的那样，这要求您将文本放在另一个容器中。然后，您需要修改js以更改p标签而不是elem的文本：

function move() {
  var elem = document.getElementById("myBar");
  var text = document.querySelector('#myBar p');

  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      text.innerHTML = width * 1  + '%';
    }
  }
}

Answer 7

在不触摸HTML结构的情况下，仅将{％{％}}包围在span标签中，并为其赋予ID值，例如'value'。通过将position: relative添加到div#myProgress（div#myBar 不得对其不应用任何position规则，否则您将无法使用需求），并通过absolute定位span#value可以实现目标。

这是一个演示：

function move() {
  var elem = document.getElementById("myBar");
  var value = document.getElementById("value");
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      value.textContent = width * 1  + '%';
    }
  }
}

#myProgress {
  position: relative; /* must be added here */
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}
/* centering the span#value */
#value {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
  <div id="myBar"><span id="value">10%</span></div>
</div>
<br>
<button onclick="move()">Click Me</button>

希望我进一步推动了你。

在div以外浮动文本？

7 个答案: