HTML ＜progress＞标签

HTML <progress> Tag

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

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

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

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

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

像这样：

        <progress value="250" max="1000"><span>25</span>%</progress>

例子
基本标签使用

        <progress value="250" max="1000"><span>25</span>%</progress>

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

        <progress max="1000"><span>25</span>%</progress>

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 = 0var max = 30function 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 = 0var max = 30function displayProgress() {if (milisec >= max) {document.getElementById('message').innerHTML = "Done!";}milisec += 1;document.getElementById('downloadProgress').value = milisec;setTimeout("displayProgress()", max);}</script></body>
</html>

HTML ＜progress＞标签相关推荐

你所不知道的noscript标签
<noscript>标签就是在当JavaScript被禁用或者不被支持时提供的一种代替方式,即 noscrip 标签中的内容会在此时被浏览器解析,作为 javascript 不可用时的备选 ...
noscript 标签的用处
noscript 标签中的元素中的内容只有在下列情况下才会显示出来: 浏览器不支持脚本浏览器支持脚本,但脚本被禁用符合上述任何一个条件,浏览器都会显示 noscript 中的内容.而在除此之外的其 ...
Vue学习:noscript标签
如果浏览器不支持js 就会显示noscript标签中的内容控制一下
noscript标签的使用
用法一句话,当浏览器不支持运行JS脚本,就会提示noscript标签里的内容
HTML＜noscript＞标签
<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时. <noscript>元素可包含普通 HTML 页面的 body 元 ...
html权重值_HTML标签权重分值排列
内部链接文字:10分标题title:10分域名:7分 H1,H2字号标题:5分每段首句:5分路径或文件名:4分相似度(关键词堆积):4分每句开头:1.5分加粗或斜体:1分文本用法(内容 ...
a标签download属性无效_HTML从零开始——链接标签
链接(hyperlink)是互联网的核心.它允许用户在页面上,从一个网址跳转到另一个网址,从而把所有资源联系在一起. URL 是链接指向的地址.链接不仅可以指向另一个网页,也可以指向文本.图像.文件等 ...
SEO中HTML标签权重
HTML标签权重分值排列内部链接文字:10分标题title:10分域名:7分 H1,H2字号标题:5分每段首句:5分路径或文件名:4分相似度(关键词堆积):4分每句开头:1.5分加粗或 ...
Web前端开发笔记——第二章 HTML语言第九节框架标签、脚本标签
目录一.框架标签 (一)显示目标页面 (二)规定大小的框架 (三)规定边框的框架二.脚本标签结语一.框架标签 (一)显示目标页面 <iframe></iframe>标签 ...
HTML的script标签
在 HTML 页面中插入一段 JavaScript: 这句话可能大家一开始根本不了解JavaScript,是什么? 在我的了解中JavaScript并不是用java语言开发的,人家用的是c语言和另外一 ...

HTML ＜progress＞标签

HTML ＜progress＞标签相关推荐

最新文章

热门文章