Question

我正在尝试构建聚合物倒计时小部件。

在Javascript中，我会为此编写一个类似的函数，并继续将更新的倒计时时间插入所需的ID元素。

 setInterval(function () {
   //Work out time till event horizon
   //Shove the new time into the associated element
   countdown.innerHTML = days + "d, " + hours + "h, "+ minutes + "m, " + seconds + "s";
 }, 1000);

在Polymer中我不确定如何解决这个问题因为我不确定如何在Polymer中使用setInterval ...这里有一些sudo代码：

                <polymer-element name="countdown-element">
                <template>
                      <div id="countDown">{{counter}}</div> 
                </template>
                <script>
                    Polymer('countdown-element', {
                        counter: function() {
                              //Do stuff
                        }
                    });

                </script>
            </polymer-element>

如何重复向计数器ID位置发送倒计时？

Answer 1

我认为你想要的是Polymer附带的双向数据绑定和＆＃34;高级主题＆＃34;中描述的async方法的组合。在这里：http://www.polymer-project.org/docs/polymer/polymer.html#additional-utilities

Here is a JSBin简单的倒计时。

Answer 2

这是聚合物3中的一个简单的倒数元素。

<html>
<body>
<script type="module">
  import { PolymerElement, html } from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module'

  class CountdownElement extends PolymerElement {

    static get properties () { return {counter: Number} }

    ready () {
      super.ready()
      this.counter = 1000;
      this.updateCounter()
    }

    updateCounter () {
      this.counter -= 1;
      setTimeout(() => this.updateCounter(), 1000)
    }

    static get template () { return html`<div>Countdown: [[counter]]</div>` }
  }

  customElements.define('countdown-element', CountdownElement)
</script>

<countdown-element></countdown-element>
</body>
</html>

此示例在Chrome和Firefox中无需使用polyfills即可运行，您可以在CodePen中尝试使用。

（这对于通过使用clock而不是counter并使用updateClock()在this.clock = new Date().toLocaleTimeString()中进行设置来构建普通时钟也很有用，但是您需要倒数时钟相反，并且似乎具有用于计算事件发生之前的剩余时间的现有逻辑。）

聚合物：创建倒计时时钟

2 个答案: