html progress标签的使用详解

progress

progress 标签定义运行中的任务进度(进程)。

属性

属性 值 描述

maxnumber规定要完成的最大值valuenumber规定进程的当前值positionfloat返回进度条的当前位置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

  1. nbsp;html><span class="pln">progress</span>function myFunction(){var x=document.createElement("PROGRESS");x.setAttribute("value","80");x.setAttribute("max","100");document.body.appendChild(x);}创建PROGRESS:

登录后复制

4.使用Position属性

  1.     nbsp;html>    <span class="pln">progress</span>    function myFunction(){ var x = document.getElementById("myProgress").position; document.getElementById("demo").innerHTML = x;}    

    下载进度条:

            

        

登录后复制

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

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

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    HTML5中的进度条progress元素简介及兼容性处理

    2025-4-1 2:42:42

    编程技术

    让<pre>标签文本自动换行

    2025-4-1 2:42:58

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索