javascript 显示进度条值

wnavrhmk 于 12个月前发布在 Java

关注(0)|答案(2)|浏览(170)

我一直在尝试用html和css制作一个进度条，中间有一个值，但是我不知道怎么做，我需要一些帮助来把给定的值整合到进度条中，这样它就可以在中间显示值。
我的代码是这样的：

<progress id="file" value="80" max="100"> 80% </progress>

字符串
但中间没有数字

JavaScript

来源：https://stackoverflow.com/questions/72596559/showing-progress-bar-values

2条答案

按热度按时间

jm2pwxwz1#

你可以检查W3Schools Custom Progress Bar。
1.创建外部div作为进度条的容器
1.内部div div，显示“进度”
1.使用JavaScript更改“进度”
你可以试试这个：

<div style="background-color: grey; text-align:center">
  <div style="width:25%;background-color:green;">25%</div>
</div>

字符串
您可以在外部和内部div上添加更多CSS，使其更具吸引力

赞(0）回复(0）举报 12个月前

2admgd592#

不好意思耽误了，你可以试试这个

<div class="progress-container">
      <progress style="height: 2rem;" class="progress-da"  value="80" max="100"></progress>
      <span class="progress-value">80%</span>
    </div>

字符串
css与sass：

.progress-container 
    position: relative

.progress-da 
    width: 100%

.progress-value 
    position: absolute
    top: 8px
    left: 50%
    transform: translateX(-50%)
    font-size: 14px
    color: #000
    font-weight: bold

型

赞(0）回复(0）举报 12个月前

我来回答

javascript 显示进度条值

2条答案

相关问题

热门标签

最新问答