举报投诉联系我们 手机版 热门标签 名动网
您的位置:名动网 > htmlprogress用法 HTML progress

htmlprogress用法 HTML progress

2023-03-19 03:20 HTML教程

htmlprogress用法 HTML progress

htmlprogress用法

HTMLProgress元素是HTML5中新增的元素,它用于显示任务的进度。它可以用来显示任务的完成情况,例如下载文件、上传文件、播放视频、游戏进度等。

<progress value="50" max="100">50%</progress>

上面的代码将显示一个水平进度条,表示当前进度为50%,最大值为100%。value属性表示当前进度,max属性表示最大值。

<progress value="50" max="100">  <span class="percentage">50%</span> </progress> 

上面的代码中使用了span标签来显示当前进度,可以使用CSS来设定span标签的样式,例如字体大小、颜色、位置等。

HTML progress

HTML progress

progress元素可用于指示任务的逐渐完成。它有两个局部属性: value,max,form

value属性定义当前进度,它在零和max属性的值之间

当省略max属性时,比例在0和1之间。使用浮点数表示进度,例如30%的0.3。

例子

下面的代码显示了progress元素和一些按钮。按下按钮可更新progress元素显示的值。

<!DOCTYPE HTML>
<html>
<body>
  <progress id="myprogress" value="10" max="100"></progress>
  <p>
    <button type="button" value="30">30%</button>
    <button type="button" value="60">60%</button>
    <button type="button" value="90">90%</button>
  </p>

  <script>
    var buttons = document.getElementsByTagName("BUTTON");
    var progress = document.getElementById("myprogress");
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].onclick = function(e) {
        progress.value = e.target.value;
      };
    }
  </script>
</body>
</html>


阅读全文
以上是名动网为你收集整理的htmlprogress用法 HTML progress全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 名动网 mdwl.vip 版权所有 联系我们