HTML ＜progress＞标签

逃离我推掉我的手 2023-10-01 17:24 34阅读 0赞

[HTML <progress> Tag][HTML _progress_ Tag]

<progress> 元素可以与 JavaScript 结合使用，以显示正在进行的任务或流程的进度。

<progress> 标签不应与 <meter> 标签（代表仪表）混淆。

句法  
<progress> 标记通常 <progress value="" max=""></progress> 与开始和结束标记内的任何内容一样编写。该内容可以是可以显示给旧版浏览器（即不支持该 <progress> 元素的浏览器）的当前值和/或最大值。

value 属性表示当前值（即当前进度所在的位置）。如果您省略此属性，进度条将变为“不确定”，并且不会显示任何进度（但大多数浏览器会显示动画条以向用户指示它正在尝试...）。

max 属性表示总量（即进度条完成时的值）。

像这样：

例子  
基本标签使用

不确定的进度条  
您可以通过删除value 属性使进度条“不确定” 。

JavaScript 示例  
这是一个使用 JavaScript 动态修改 <progress> 元素值的快速示例。

<button onClick="displayProgress()">Run Progress Bar</button>
            <progress id="downloadProgress" value="0"  max="30">Hello</progress>
            <span id="message"></span>
            <script>
                var milisec = 0
                var max = 30
                function displayProgress() {
                    if (milisec >= max) {
                        document.getElementById('message').innerHTML = "Done!";
                    }
                    milisec += 1;
                    document.getElementById('downloadProgress').value = milisec;
                    setTimeout("displayProgress()", max);
                }
            </script>

完整例子

<!DOCTYPE html>
    <html>
        <head>
            <title>TODO supply a title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body>
            <progress value="250" max="1000">
                <span>25</span>%
            </progress>
            <progress max="1000">
                <span>25</span>%
            </progress>
            <button onClick="displayProgress()">Run Progress Bar</button>
            <progress id="downloadProgress" value="0"  max="30">Hello</progress>
            <span id="message"></span>
            <script>
                var milisec = 0
                var max = 30
                function displayProgress() {
                    if (milisec >= max) {
                        document.getElementById('message').innerHTML = "Done!";
                    }
                    milisec += 1;
                    document.getElementById('downloadProgress').value = milisec;
                    setTimeout("displayProgress()", max);
                }
            </script>
        </body>
    </html>

### ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16][] ###

[HTML _progress_ Tag]: https://www.quackit.com/html/tags/html_progress_tag.cfm
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/94dda7638ea745d4acb3096cfba16f84.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16