小时,分钟,秒,淘汰赛倒数计时器

时间:2014-02-27 21:07:40

标签: jquery html knockout.js

嗨我想知道是否有人可以告诉我如何制作一个显示小时,分钟和秒的淘汰赛倒计时器

need a knockout timer for the project

Jeroen对小提琴的回答很棒,但它只显示了几秒钟。任何帮助将不胜感激

谢谢

1 个答案:

答案 0 :(得分:5)

使用几个计算的可观察量。

<强> HTML

<div id="timer">
    <span data-bind="text: hours"></span> hrs
    <span data-bind="text: minutes"></span> minutes
    <span data-bind="text: seconds"></span> seconds
</div>

<强> JAVASCRIPT

function ViewModel() {
    var self = this;

    self.timer = ko.observable(4566);

    self.hours = ko.computed( function() {
        return Math.floor(self.timer() / 3600);
    }, self);

    self.minutes = ko.computed( function() {
        return Math.floor(self.timer() / 60) % 60;
    }, self);

    self.seconds = ko.computed( function() {
        return self.timer() % 60;
    }, self);


    setInterval(function() {
        var newTimer = self.timer() -1;
        self.timer(newTimer <= 0 ? 60 : newTimer);
    }, 1000);
};

ko.applyBindings(new ViewModel());