progress標籤

時間 2019-11-11

標籤 progress 標籤简体版

原文原文鏈接

progress

progress 標籤訂義運行中的任務進度（進程）。javascript

屬性

屬性	值	描述
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元素們.

演示

50%進度html
不肯定進度html5

3.建立PROGRESSjava

<!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元素的樣式控制、兼容與實例app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。