html progress標籤的使用詳解-html教學-PHP中文網

html progress標籤的使用詳解

黄舟

發布： 2017-07-08 13:56:19

原創

3777 人瀏覽過

progress

progress 標籤定義執行中的任務進度（進程）。

屬性

#maxnumber規定要完成的最大值規定程序的目前值position進度條的目前位置#傳回進度條的標記清單(如有)

屬性

	##value	# number
		float傳回
	labels	-

max預設情況下進度值範圍從0.0~1.0,如果設定成max=100 ,則進度取值範圍從
0~100.
#value規定目前值,若max=100# ,value=50則進度剛好一半.value屬性的存在與否決定了progress進度條是否具有確定性.當沒有value時,瀏覽器進度條會無限循環,但是,一旦有了
value
position
##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元素的樣式控制、相容與實例###

以上是html progress標籤的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！