Javascript 击倒js如何实现倒计时

我是敲除js的新手。尝试使用敲除js在html上实现倒计时

为此，我在视图中添加了4个html元素（输入、跨度和开始、停止按钮）。按下开始按钮时，写入

对象的值应传递给

refreshViewModel

，并将有倒计时过程。当倒计时处理时，剩余时间将显示在

元素内。如果按下停止按钮，倒计时将停止

如果倒计时完成，将启动另一个函数（从另一个viewModel调用），该函数使用一些参数过滤页面

将文本框值绑定到范围值。我不知道如何动态计算和显示span中的剩余值

Html:

第一视图模型：刷新页面时间视图模型：

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();
}



};

   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....

---

主要问题是ViewModel代码，它在需要函数（启动和停止计数器）的地方使用了一个

可观察的

。此外，它似乎没有一个明确的定义，它试图做什么

另外，我假设你想让开始按钮显示计时器何时停止，停止按钮显示计时器何时启动——所以我也冒昧地添加了这个功能

以下是重写的视图模型：

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

  ，用于控制启动和停止按钮的可见性

• 有一个空函数

  回调

  ，可用于在倒计时为零时执行任何函数

以下是新的标记：

<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>

请注意，创建了一个回调函数，它只是发出警报。您的代码可以保持原样，即

viewModelTimer.callBackMethod=viewModel.filter

最后，一个让您可以玩转的实例：
主要问题是您的ViewModel代码，它在需要函数（启动和停止计数器）的地方使用了一个可观察的
。此外，它似乎没有一个明确的定义，它试图做什么

另外，我假设你想让开始按钮显示计时器何时停止，停止按钮显示计时器何时启动——所以我也冒昧地添加了这个功能

以下是重写的视图模型：

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
，用于控制启动和停止按钮的可见性

有一个空函数
回调
，可用于在倒计时为零时执行任何函数


以下是新的标记：

<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>

请注意，创建了一个回调函数，它只是发出警报。您的代码可以保持原样，即
viewModelTimer.callBackMethod=viewModel.filter

最后，一个让您可以玩的活生生的例子：
谢谢，这正是我要找的例子。小的补充：“viewModelTimer.callBackMethod=viewModel.filter”引用“filter（）”函数从第二个viewModel到第一个viewModel。谢谢，这正是我要寻找的示例。小的增加：“viewModelTimer.callBackMethod=viewModel.filter”引用“filter（）”函数从第二个viewModel到第一个viewModel。
$(function(){
     var viewModelTimer = new RefreshPageTimerViewModel();
    viewModelTimer.Callback = function(){
        alert("finished");
    };
    ko.applyBindings(viewModelTimer);
})