Rumah > Artikel > hujung hadapan web > html progress标签的使用详解
html progress标签的使用详解
- 黄舟asal
- 2017-07-08 13:56:193757semak imbas
progress
progress 标签定义运行中的任务进度（进程）。
属性
| 属性 | 值 | 描述 |
|---|---|---|
| max | number | 规定要完成的最大值 |
| value | number | 规定进程的当前值 |
| position | float | 返回进度条的当前位置 |
| labels | - | 返回进度条的标记列表(如有) |
max缺省情况下进度值范围从0.0~1.0,如果设置成max=100,则进度取值范围从0~100.value规定当前值,若max=100,value=50则进度刚好一半.value属性的存在与否决定了progress进度条是否具有确定性.当没有value时,浏览器进度条会无限循环,但是,一旦有了value属性(即使没有值),也被认为是确定的.position是只读属性,该属性反映了当前进度的位置,就是value/max的值.labels也是只读属性,得到的是指向该progress元素的label元素们.
演示
3.创建PROGRESS
<!DOCTYPE html>
<html>
<head>
<title>progress</title>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
function myFunction()
{
var x=document.createElement("PROGRESS");
x.setAttribute("value","80");
x.setAttribute("max","100");
document.body.appendChild(x);
}
</script>
<body>
创建PROGRESS:
<button onclick="myFunction()" id="myprogress">创建</button>
</body>
</html>4.使用Position属性
<!DOCTYPE html>
<html>
<head>
<title>progress</title>
<meta charset="utf-8">
</head>
<body>
<script>
function myFunction()
{
var x = document.getElementById("myProgress").position;
document.getElementById("demo").innerHTML = x;
}
</script>
<body>
<p>下载进度条:</p>
<progress id="myProgress" value="50" max="100"></progress>
<p id="demo"></p>
<button onclick="myFunction()">获取进度值</button>
</body>
</html>HTML5 progress元素的样式控制、兼容与实例
Atas ialah kandungan terperinci html progress标签的使用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：html 浏览器自动加上<pre>标签的详解Artikel seterusnya：HTML5中的进度条progress元素简介及兼容性处理