Rumah > hujung hadapan web > html tutorial > html progress标签的使用详解

html progress标签的使用详解

黄舟
Lepaskan: 2017-07-08 13:56:19
asal
3808 orang telah melayarinya

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>
    Salin selepas log masuk

    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>
    Salin selepas log masuk

    HTML5 progress元素的样式控制、兼容与实例

    Atas ialah kandungan terperinci html progress标签的使用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    Label berkaitan:
    sumber:php.cn
    Kenyataan Laman Web ini
    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
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan