好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

htmlprogress标签的使用详解

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元素的样式控制、兼容与实例

以上就是html progress标签的使用详解的详细内容,更多请关注Gxl网其它相关文章!

查看更多关于htmlprogress标签的使用详解的详细内容...

  阅读:49次