如何开始倒计时

时间:2017-11-28 08:39:02

标签: javascript knockout.js

任何使这项工作的想法?

我开始对我正在制作的工作板中的某些任务进行倒计时,但代码不起作用。

任何帮助将不胜感激:)

<div data-bind="value: function llogarit(due_date){
  var data = due_date;
var countDownDate = new Date(data).getTime(),
    countdownfunction = setInterval(function() {
        var e = (new Date).getTime(),
            n = countDownDate - e,
            t = Math.floor(n / 864e5),
            o = Math.floor(n % 864e5 / 36e5),
            a = Math.floor(n % 36e5 / 6e4),
            r = Math.floor(n % 6e4 / 1e3); 
    console.log(e);
    }  ">

2 个答案:

答案 0 :(得分:2)

由于您已经标记了 knockoutjs ,我会专注于淘汰赛错误:

  • 您在value上使用<div>绑定,但不受支持。请改用text绑定。
  • 传递给绑定的javascript语法错误,导致绑定的init方法抛出错误。
  • 您传递的功能不会return任何内容,因此基因敲除将无法注入任何HTML。
  • 传递的javascript不包含任何observable值,因此knockout将没有一种机制来保持最新状态。

我建议解决这些问题,将逻辑整齐地放在视图模型中:

&#13;
&#13;
// Ticker returns an observable time integer
// that is updated on a fixed `interval`
var Ticker = function(interval) {
  var obsNow = ko.observable(Date.now());

  setInterval(
    function() {
      obsNow(Date.now());
    },
    interval
  );

  return obsNow;
};

var CountDown = function(to) {
  // CountDown creates its own ticker that triggers
  // an update every 1000ms
  // Note: if you plan to dispose the instance, make
  //       sure you implement a disposal mechanism
  //       for the ticker as well
  var currentTime = Ticker(1000);

  // Counter formats a time difference in to a neat string
  // that can be used in your view
  this.counter = ko.pureComputed(function() {
    // By referencing the observable time integer,
    // we ensure automatic updates
    var e = currentTime(),
      n = to - e,
      t = Math.floor(n / 864e5),
      o = Math.floor(n % 864e5 / 36e5),
      a = Math.floor(n % 36e5 / 6e4),
      r = Math.floor(n % 6e4 / 1e3);

    // Note: this logic might better be defined in
    //       several steps, or even in the view.
    return t + "d, " + [o, a, r].map(l2).join(":");
  });
};

// Count down to 2 days from now
ko.applyBindings(new CountDown(Date.now() + 2 * 24 * 60 * 60 * 1000));

// Left pad numbers to a min. length of 2 (1 -> "01")
function l2(x) {
  return (x < 10 ? "0" : "") + x;
}
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="text: counter"></div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您上面的Javascript代码似乎不完整:

setInterval(function() {
    var e = (new Date).getTime(),
        n = countDownDate - e,
        t = Math.floor(n / 864e5),
        o = Math.floor(n % 864e5 / 36e5),
        a = Math.floor(n % 36e5 / 6e4),
        r = Math.floor(n % 6e4 / 1e3);
    console.log(e);
}

实际上缺少milliseconds个参数。

有关setInterval函数的文档,请参阅this page

这很可能在语法上是正确的:

setInterval(function() {
    var e = (new Date).getTime(),
        n = countDownDate - e,
        t = Math.floor(n / 864e5),
        o = Math.floor(n % 864e5 / 36e5),
        a = Math.floor(n % 36e5 / 6e4),
        r = Math.floor(n % 6e4 / 1e3);
    console.log(e);
}, 3000);