如何在progress进度条内部添加显示其当前数值的文本？

原生<progress> 标签不支持直接在元素内部渲染内嵌文本，我们通过外层容器包裹+文字绝对定位的方式实现需求，完整实现代码如下：

HTML结构调整 #

将你现有的progress标签替换为如下带容器的结构：

<!-- 外层进度条定位容器 -->
<div class="progress-wrap">
  <progress align="left" class="turnbox2 turnbar" id="myturn"></progress>
  <span class="progress-text" id="progressText">0%</span>
</div>

CSS样式配置 #

新增如下样式控制布局，不会影响你原有progress的样式效果：

.progress-wrap {
  position: relative;
  display: inline-block;
  /* 可根据实际页面需求调整容器宽度，和原有进度条宽度保持一致即可 */
  width: 300px;
}

#myturn {
  width: 100%;
}

.progress-text {
  position: absolute;
  /* 水平垂直居中 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 文字样式可自行调整 */
  font-size: 14px;
  color: #222;
  /* 低亮度进度背景下文字更清晰 */
  text-shadow: 0 0 2px rgba(255,255,255,0.8);
}

进度同步更新逻辑 #

后续更新进度时同步修改进度条值和显示文本即可，示例JS代码：

// percent为0-100的整数，代表当前进度百分比
function setProgress(percent) {
  // 若你给progress设置了自定义max属性，赋值规则对应调整即可
  document.getElementById('myturn').value = percent / 100;
  document.getElementById('progressText').innerText = `${percent}%`;
}

// 调用示例：设置进度为60%
setProgress(60);

可选优化：如果进度条前景填充色较深，可以在setProgress方法中新增判断，当percent>50时，将文字颜色修改为白色，避免深色背景下文字看不清。

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