首页 » 编程语言 » html » 正文

HTML5元素progress标签的使用方法及作用

HTML5元素progress标签的使用方法及作用详解如下:

<progress>标签的定义

<progress>标签定义进度条的,也就是定义任务的进度(进程),比如下载的进度显示条效果。

<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况),但表示度量衡,请使用 <meter> 标签代替。

<progress>标签是html5中新增的标签

浏览器支持情况

 <progress>标签已被IE10或以上、Firefox、Opera、Chrome 和 Safari6支持。

但 IE 9 或者更早版本的 IE 浏览器不支持<progress>标签。

<progress> 标签的用法

<progress>标签是双标签,必须有开始标签<progress>和结束标签</progress>成对出现。

比如,我们要标记一个任务完成了26%,代码就可以这样写:

<progress value="26" max="100"></progress>

以上代码在浏览器中显示的进度条效果如下:

2020-05-03_104642.png

注意:<progress>和</progress>之间不需要任何元素内容,就算有元素内容也是不可见的。

<progress> 标签的属性


属性描述
maxnumber规定需要完成的值。
valuenumber规定进程的当前值。

<progress>标签的属性的用法也很简单的,max属性代表整个任务的总数量,而value属性代表任务已经完成了多少数量。


比如,我的总任务数量一共需要完成78件,但我目前已经完成了60件,用<progress>标签表示当前完成任务的进度,就可以像下面这样写:

<progress value="60" max="78"></progress>

以上代码在浏览器中显示的进度条效果如下:

2020-05-03_110318.png

扩展学习

 <progress>标签配合JavaScript 一起使用,可以动态的显示任务的进度。

<progress id='progress1' value="0" max="100">
</progress>
<button onclick="start_run(100)">下载</button>
<script>
function start_run(n)
{
    if(n==0){alert("下载完成")}
    var progress1=document.getElementById("progress1")
    n=n-1
    cur_task=100-n
    progress1.value=cur_task
    setTimeout("start_run("+n+")",100)
    
}
</script>

以上代码在浏览器中显示效果如下:

111.gif

如上图所示,点击“下载”按钮后,任务进度条就会动起来!



欢迎您发表评论或留言