Question

我正在寻找使用流星创建一个简单的秒表。目前我有一个开始和停止按钮，当点击开始时，它将持续时间设置为零，当点击停止时，它计算开始和结束时间之间的持续时间，并使用会话变量显示。我的简单代码如下：

if (Meteor.isClient) {

  startTime = 0;
  endTime = 0;


  Template.hello.helpers({
    displayDuration: function () {
      return Session.get('duration');
    }, 
  });

  Template.hello.events({
    'click #start': function () {
      Session.set('duration', 0);
      startTime = new Date().getTime()
      // console.log(startTime);
    },
    'click #stop': function () {
      endTime = new Date().getTime()
      var duration = endTime - startTime;
      Session.set('duration', duration);
      // console.log(endTime);
      console.log(duration);
    }
  });
}

我的问题是接下来要去哪儿？我希望在按下开始按钮后每毫秒更新一次dom，但不知道如何在流星框架内实现它。

任何指示赞赏。

Answer 1

使用remcoder:chronos包创建被动时间变量，并在模板助手中使用它。

<强> HTML：

<template name="hello">
   duration: {{duration}}
</template>

<强> JS：

Template.hello.helpers({
  duration : function() {
    var start = Session.get('startTime');
    return start ? Chronos.currentTime(100) - start : null; // updates every hundred milliseconds
  }
});

Template.hello.events({
  'click #start': function () {
    Session.set('startTime', new Date().getTime());
  },
  'click #stop': function(){
    Session.set('startTime',null); // stops the timer
});

在Meteor.js中创建秒表

1 个答案: