代码之家 › 专栏 › 技术社区 › user3310115

如何结合铁计时器和力矩js在聚合物中显示hh:mm:ss格式

polymer

user3310115 · 技术社区 · 7 年前

我试图使用矩js将计时器中使用的时间转换为hh:mm:ss格式,但遇到了问题。下面是我的代码。

<iron-timer id="timer" start-time="150" end-time="0" current-time="[[currentTime]]">
<moment-js date="[[_calculatedTime(currentTime)]]"></moment-js>
</iron-timer>

因此,当时间开始时,如果是格式化日期,时间不会更新。我怎样才能让它工作

1 回复 | 直到 7 年前

LeBird 7 年前

这是我的想法,但你的问题有点不完整,所以如果我走错了方向,请纠正我。

组件依赖性:polymer 2.5、iron timer 2.1.2、moment js 0.7.2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Timer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="import" href="../bower_components/polymer/polymer.html">
  <link rel="import" href="../bower_components/iron-timer/iron-timer.html">
  <link rel="import" href="../bower_components/moment-js/moment-js.html">
</head>
<body>
<dom-module id="moment-timer">
  <template>
    <iron-timer id="timer" start-time="150" end-time="0" current-time="{{currentTime}}"></iron-timer>
    <moment-js date="[[_toMilliSecs(currentTime)]]" format="HH:mm:ss" utc></moment-js>
  </template>
  <script>
    class MomentTimer extends Polymer.Element{
      static get is(){
        return 'moment-timer';
      }
      static get properties(){
        return {
          currentTime: Number
        }
      }
      _toMilliSecs(currentTime){
        return currentTime * 1000;
      }
      ready(){
        super.ready();
        this.$.timer.start();
      }
    }
    window.customElements.define(MomentTimer.is,MomentTimer);
  </script>
</dom-module>
<moment-timer></moment-timer>
</body>
</html>

有几件事需要注意:

你必须在脚本的某个地方启动计时器。我在ready()回调中这样做了。一定要打电话 super.ready() 第一
你需要通过 currentTime 属性的毫秒数 moment-js 元素-我使用一种方法 _toMilliSecs 就是为了做到这一点。
如moment js的一个演示示例所示,您需要设置 utc 上的属性 力矩js 要素这对于为倒计时提供起始参考是必要的。基本上,我们让它计算1970-01-01 00:00:00的时间,并设置与之相关的计时器。效果是一样的。

希望有帮助!

推荐文章

Kuba Å imonovský · Templatizer-如何多次渲染同一模板,Polymer 2。十、

7 年前

Riposte · 从单元渲染器迁移Vaadin网格聚合物元素

7 年前

AlexBenoit · 聚合物2条件属性

7 年前

Nikhil Raghavendra · Polymer 2.0数据绑定不工作

7 年前

user3310115 · 如何结合铁计时器和力矩js在聚合物中显示hh:mm:ss格式

7 年前

Yanko Ojeda · 如何在熨斗窗体内重置纸张下拉菜单?

7 年前

Matthew · 如何解决iron ajax响应延迟问题

7 年前

yberg · 使用nginx反向代理服务聚合物PWA

7 年前

Mason · 如何要求服务人员忽略与Polymer中特定URL模式匹配的请求?

7 年前

Yairopro · Web组件未显示

7 年前