需要一個淘汰計時器的項目

我需要一個淘汰計時器爲我的項目，可以重新啓動後，它達到0點擊。我有以下代碼，但這不會重新開始。有人可以幫助我嗎？需要一個淘汰計時器的項目

this.countDown = ko.observable(); 

ko.bindingHandlers.timer = { 

    update: function (element, valueAccessor) { 
     var sec = $(element).text(); 
     var timer = setInterval(function() { 

      $(element).text(--sec); 
      if (sec == 0) { 
       clearInterval(timer); 

      } 
     }, 1000); 
    } 
};

來源

2013-08-26 narcissi

你嘗試過什麼？我沒有看到任何'click'處理程序，所以自然不會發生任何事情。你不使用你定義的'observable'。 – Stijn

HTML代碼如下所示：

– narcissi

如果你想使用你的問題的辦法替代這一行：

clearInterval(timer)

像這樣的東西：

sec = 61;

在工作中看到這個：

ko.bindingHandlers.timer = { 
 

 
    update: function (element, valueAccessor) { 
 
     var sec = $(element).text(); 
 
     var timer = setInterval(function() { 
 

 
      $(element).text(--sec); 
 
      if (sec == 0) { 
 
       sec = 61; 
 
      } 
 
     }, 1000); 
 
    } 
 
}; 
 

 
var vm = { countDown: ko.observable() }; 
 

 
ko.applyBindings(vm);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div id="timer"> <span data-bind="timer: countDown">60 </span> </div>

但是，我建議將這種邏輯封裝在ViewModel中，而不是在自定義綁定中。例如這種視圖模型會工作：

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

 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div id="timer"> <span data-bind="text: timer"></span> </div>

來源

2013-08-26 22:40:02 Jeroen

需要一個淘汰計時器的項目

回答

相關問題