淘汰賽JS如何實現倒數計時器

Question

我是新的淘汰賽js.Trying對HTML實施倒計時用基因敲除的js

爲此我加4個HTML元素（輸入，跨度和啓動，停止按鈕）的觀點。當按下開始按鈕時，寫在<input>對象上的值應該傳遞給refreshViewModel，並且會有倒計時過程。倒計時處理剩餘時間將顯示在<span>元素內。如果按下停止按鈕，則倒計時將停止。

如果倒數計時完成另一個函數（即從另一個viewModel回調），它將啓動一些參數過濾頁面。

約束值的綁定文本框值。我無法弄清楚如何計算和動態顯示範圍內的剩餘價值？

HTML：

<div id="pnlTimer" class="row"> 
    <div class="span2 pull-right" style="border:1px solid rgb(218, 218, 218)" > 
    <span style="font-weight:bold">Reload Interval</span> 
    <br /> 
    <input id="initialTime" style="width:20px;height:14px" data-bind="value: initialTime" /> 
    <span id="remainingTime" style="visibility:hidden">/15</span> second(s) 
    <button class="btn" style="margin-top:5px" id="StartCounter" data-bind="click: StartCounter"> 
     <i class="icon-play"></i> 
    </button> 
    <button style="visibility:hidden;margin-top:5px;margin-left:-44px" class="btn" id="StopCounter" data-bind="click: StopCounter"> 
     <i class="icon-stop"></i> 
    </button> 
    </div> 
</div> 

JS：

 @Url.Content("~/Content/App/viewModels/listCasesViewModel.js 
    @Url.Content("~/Content/App/viewModels/RefreshPageTimerViewModel.js      



$(document).ready(function() { 
    var viewModel = new ListCasesViewModel(); 
    viewModel.init(); 

    var pnl = $("#pnlFilterPanel").get()[0]; 
    ko.applyBindings(viewModel, pnl); 


    var viewModelTimer = new RefreshPageTimerViewModel(); 
    viewModelTimer.init(); 

    var pnlTimer = $("#pnlTimer").get()[0]; 
    ko.applyBindings(viewModelTimer, pnlTimer); 

    viewModelTimer.callBackMethod = viewModel.filter; 


}); 

第一視圖模型：RefreshPageTimerViewModel：

var RefreshPageTimerViewModel = function() { 
var self = this; 


self.StartCounter = ko.observable(); 
self.StopCounter = ko.observable(); 
self.initialTime = ko.observable(); 
self.remainingTime = ko.computed(function() { 
    return self.initialTime(); 
}, self); 

countDown: ko.observable() 


this.init = function() { 
    self.Count(); 

} 

this.callBackMethod = function() { 
    alert("not implemented!"); 
} 

this.Count = function() { 

    var initial = self.initialTime; // initialTime value; 
    var remaining = self.remainingTime; 


    if (remainingTime <= 0) { 
     this.ExecuteCallBackMethod(); 
    } 
} 

this.ExecuteCallBackMethod = function() { 
    this.callBackMethod(); 
} 



}; 

二視圖模型：ListCasesViewModel：

var ListCasesViewModel = function() { 
    var self = this; 

self.selectedStartDate = ko.observable(null); 
self.selectedEndDate = ko.observable(new Date()); 
self.selectedSearchKey = ko.observable(""); 
self.selectedStatuses = ko.observableArray(); 
self.selectedHospitals = ko.observableArray(); 

// methods... 
this.init = function() { 
    self.selectedEndDate(new Date()); 
    self.filter(); 
} 

this.filter = function() { 

    // get filter control values 
    var startDate = self.selectedStartDate(); // dtStart.value(); 
    var endDate = self.selectedEndDate(); //dtEnd.value(); 
    var searchText = self.selectedSearchKey(); 

    //And Some calculations.... 

Answer 1

的主要問題是您的視圖模型的代碼，它使用observable，你想要的功能（啓動和停止計數）。此外，它似乎沒有明確的定義它正在嘗試做什麼。我還假設你想讓Start按鈕顯示定時器何時停止，並且Stop按鈕顯示定時器啓動的時間 - 所以我也冒昧地添加了這個功能。

這裏是重寫視圖模型：

var RefreshPageTimerViewModel = function() { 
    var self = this; 

    self.timerId = 0; 
    self.elapsedTime = ko.observable(0); 
    self.initialTime = ko.observable(0); 
    self.remainingTime = ko.computed(function(){ 
     return self.initialTime() - self.elapsedTime(); 
    }); 
    self.isRunning = ko.observable(false); 

    self.StartCounter = function(){ 
     self.elapsedTime(0); 
     self.isRunning(true); 
     self.timerId = window.setInterval(function(){ 
      self.elapsedTime(self.elapsedTime()+1); 
      if(self.remainingTime() == 0){ 
       clearInterval(self.timerId); 
       self.isRunning(false); 
       self.Callback(); 
      } 
     },1000) 
    } 
    self.StopCounter = function(){ 
     clearInterval(self.timerId); 
     self.isRunning(false); 
    } 
    self.Callback = function(){} 
} 

有幾件事情需要注意：

• 有一個屬性timerId，這並不需要可觀察到，但可以讓我們停止定時器，用於增加elapsedTime

• 有一個可觀察的屬性isRunning用於控制th e開始和停止按鈕的可見性

• 有一個空函數Callback當倒計數到零時可用於執行任何函數。

這裏是新的標記：

<div id="pnlTimer" class="row"> 
    <div class="span2 pull-right" style="border:1px solid rgb(218, 218, 218)" > 
    <span style="font-weight:bold">Reload Interval</span> 
    <br /> 
    <input id="initialTime" style="width:20px;height:14px" data-bind="value: initialTime" /> 
    <span id="remainingTime" data-bind="text: remainingTime"></span> second(s) 
    <button class="btn" style="margin-top:5px" id="StartCounter" data-bind="click: StartCounter, visible: !isRunning()"> 
     start 
    </button> 
    <button style="margin-top:5px" class="btn" id="StopCounter" data-bind="click: StopCounter, visible:isRunning()"> 
     Stop 
    </button> 
    </div> 
</div> 

注意添加visible: !isRunning()的開始和visible:isRunning()到停止按鈕。

最後，這裏是初始化代碼：

$(function(){ 
    var viewModelTimer = new RefreshPageTimerViewModel(); 
    viewModelTimer.Callback = function(){ 
     alert("finished"); 
    }; 
    ko.applyBindings(viewModelTimer); 
}) 

注意創造它只是提醒回調函數。你的代碼可能是因爲它是，即viewModelTimer.callBackMethod = viewModel.filter;

最後，一個活生生的例子，讓你玩：http://jsfiddle.net/eF5Ec/