如何结合铁定时器和moment-js来显示聚合物中的hh:mm:ss格式
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何结合铁定时器和moment-js来显示聚合物中的hh:mm:ss格式相关的知识,希望对你有一定的参考价值。
我正在尝试将我在计时器中使用的时间转换为hh:mm:ss格式使用时刻js但卡住了。以下是我的代码。
<iron-timer id="timer" start-time="150" end-time="0" current-time="[[currentTime]]">
<moment-js date="[[_calculatedTime(currentTime)]]"></moment-js>
</iron-timer>
因此,当时间开始时,在格式化日期的情况下时间不会更新。我怎样才能让它发挥作用
答案
这就是我提出的问题,但你的问题有些不完整,所以如果我走错路,请纠正我。
组件依赖性:聚合物2.5,铁定时器2.1.2,力矩-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
元素上设置moment-js
属性。这是为倒计时提供起始参考所必需的。基本上,我们计算从1970-01-01 00:00:00开始的时间并设置相对于该时间的计时器。效果是一样的。
希望有所帮助!
以上是关于如何结合铁定时器和moment-js来显示聚合物中的hh:mm:ss格式的主要内容,如果未能解决你的问题,请参考以下文章
MongoDB,如何将查找和排序与聚合中的 $cond 结合起来?
MongoDB,如何将查找和排序与聚合中的 $cond 结合起来?