时间戳

首页 > 解决方案 > 在div之外浮动文本？

javascript - 在div之外浮动文本？

问题描述

我正在尝试修改这个 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 之外？

标签： javascripthtmlcss

解决方案

您需要添加一个绝对元素（#center），它具有相同的宽度（left: 0;right: 0;拉伸到#myBar大小）和行高（line-height: 30px因此文本垂直对齐#myBar）的背景栏（#myBar），居中他的文本（text-aling: center），然后改变内部文本作为进度条的宽度（#myProgress）使用javascript（）center.innerHTML = width * 1 + '%';增加

<!DOCTYPE html>
<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

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

#center{
position:absolute;
left: 0;
right: 0;
text-align:center;
line-height: 30px;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
<div id='center'>10%</div>
  <div id="myBar"></div>
</div>

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

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

</body>
</html>

推荐阅读