HTML进度标签 HTML进度标签|HTML5

本文概述

HTML进度标签的属性
HTML进度标签示例
样式进度栏
带有JavaScript的HTML进度标签
支持的浏览器

HTML < progress> 标记用于显示任务的进度。它为Web开发人员提供了一种在网站上创建进度栏的简便方法。它主要用于显示网页上文件上传的进度。
HTML进度标记是HTML5中的新增功能, 因此你必须使用新的浏览器。
HTML进度标签的属性HTML < progress> 标记支持全局和事件属性以及2个特定属性。

标签	描述
value	它定义了任务已完成多少工作。
max	它定义了任务总共需要多少工作。

进度标签应仅用于表示任务的进度, 而不仅仅是指标（磁盘速度使用情况）。为此, 使用< meter> 元素。HTML进度标签示例让我们看一下没有属性的HTML进度示例。

< progress> < /progress>

【HTML进度标签】立即测试
输出：
让我们看一下带有value和max属性的进度示例。

Downloading progress: < progress value="http://www.srcmini.com/43" max="100"> < /progress>

立即测试
输出：
下载进度：
样式进度栏你可以在进度标签上应用CSS代码。

progress{ width: 300px; height: 30px; }

立即测试
输出：
带有JavaScript的HTML进度标签< progress> 标记应与JavaScript结合使用以显示任务的进度。

< script> var gvalue=http://www.srcmini.com/1; function abc(){ var progressExample = document.getElementById ('progress-javascript-example'); setInterval (function () { if(gvalue< 100){ gvalue++; progressExample.value =http://www.srcmini.com/gvalue; } abc(); }, 1000); } < /script> < progress id="progress-javascript-example" min="1" max="100"> < /progress> < br/> < br/> < button onclick="abc()"> click me< /button>

立即测试
输出：
点击我
支持的浏览器