Mozilla Hacks

HTML 的 <progress> 元素

头像照片 作者：louisremi

发布于 2011 年 6 月 6 日 分类于 Firefox、Firefox Aurora 和 HTML

HTML 的 <progress> 元素 刚刚 加入 到 Firefox Aurora（即将成为 Firefox 6）。

顾名思义，此元素可用于提供网页上任何正在进行的操作的视觉线索。

  • 一组正在下载的资源，
  • 正在上传的文件，
  • 正在计算的 Web Worker，
  • 正在初始化的 WebGL 场景……

下面是一个简单的演示，说明如何将 progress 元素与 FileReader API 结合使用以创建 Ajax 文件上传器。

别忘了点击**结果**查看代码运行效果。

关于 louisremi

开发者关系团队成员，长期 jQuery 贡献者和开放 Web 爱好者。@louis_remi

更多 louisremi 的文章……

10 条评论

  1. Paul Rouget

    如果您想知道，JS 代码中的“~~”等价于“Math.floor()”。

    2011 年 6 月 6 日 上午 09:52

    1. Vitaliy Kupets

      哇，这是波浪号运算符的巧妙用法。可惜它会让大多数源代码阅读者感到困惑。

      2011 年 6 月 8 日 上午 05:52

  2. Chris

    感谢“~~”的提示。
    但是什么是“$”？我是否需要它来使用 progress 元素？
    或者它是为了使示例与 IE6 兼容而必需的？但我猜 IE6 首先就没有 progress 元素？

    2011 年 6 月 6 日 上午 11:05

    1. louisremi

      “$”是 jQuery 的简写变量：https://jqueryjs.cn
      它在这里是为了缩短代码长度，而不是为了跨浏览器兼容性。

      2011 年 6 月 6 日 上午 11:15

      1. gypsylady

        在某种程度上我不得不同意你。
        将“$”用于 jQuery 是个好发现。
        它将无法处理兼容性。

        2011 年 6 月 10 日 下午 22:49

  3. smaug

    你能否重写示例以使用实际的 API，
    而不是通过 jQuery 使用 API？

    2011 年 6 月 6 日 上午 11:26

    1. Paul Rouget

      已完成。

      2011 年 6 月 7 日 上午 05:12

  4. kamathln

    就是这样。如果我将 HAML（超应用程序标记语言）和 HTML 交换使用，不要感到困惑。

    2011 年 6 月 9 日 上午 01:58

  5. simonleung

    JS 代码中的“~~”等价于“正数的 Math.floor()”。

    2011 年 6 月 9 日 上午 06:47

  6. gypsylady

    return false;

    可以给出错误的数字并将其放入循环中。

    模拟缓慢上传的虚假 XHR 对象

    其他问题之一可能是？

    progress.innerHTML = ~~(100 * e.loaded / e.total) + “%”

    window.location.href & xhr.send(file)

    将导致值的下降……？仅为个人意见~
    谢谢~

    2011 年 6 月 10 日 下午 23:01

本文评论已关闭。