javascript - Knockout js如何实现倒计时

标签 javascript jquery html knockout.js

我是 Knockout js 的新手。尝试使用 knockout js 在 html 上实现倒数计时器

为此,我在 View 中添加了 4 个 html 元素(输入、跨度和开始、停止按钮)。当按下开始按钮时,写在 <input> 上的值对象应传递给 refreshViewModel , 并且会有倒计时过程。当倒计时处理剩余时间时,会在<span>里面显示。元素。如果按下停止按钮,倒计时将停止。

如果倒计时完成另一个函数(从另一个 viewModel 回调)将启动过滤页面的一些参数。

将文本框值绑定(bind)到跨度值。我不知道如何动态计算和显示 span 内的剩余值(value)?

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;


});


第一个 View 模型: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();
}



};

第二个 View 模型: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....

最佳答案

主要问题是您的 ViewModel 代码,它使用 observable你想要一个功能(启动和停止计数器)的地方。此外,它似乎没有明确定义要做什么。

此外,我假设您希望“开始”按钮在计时器停止时显示,而“停止”按钮在计时器启动时显示 - 所以我也冒昧地添加了此功能。

这里是重写的 View 模型:

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

一些注意事项:

  • 拥有属性(property) timerId ,它不需要被观察到,但允许我们停止用于递增 elapsedTime 的计时器。

  • 有一个可观察的属性 isRunning用于控制开始和停止按钮的可见性

  • 有一个空函数 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/

关于javascript - Knockout js如何实现倒计时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20467548/

相关文章:

javascript - css3 动画文字居中对齐

javascript - 使用 eval() 定义 const 变量

javascript - 使用 Angular.js 和 Restangular,如何在循环内的所有子请求完成时进行 Hook ?

javascript - 从哪里 Javascript 错误 "ReferenceError: Can' t 找到变量 : imenu_title"?

jquery - 如何检查鼠标是否在 jQuery 中的元素上?

javascript - 如何将 PHP 日期变量作为 mindate 传递给日期选择器

html - 溢出隐藏我的图像

javascript - 重命名缩小的 JavaScript 对象?

javascript - 使用 JavaScript 和 JQuery,如何维护动态更新的 HTML 选择元素的选定状态?

html - 调整大小时在浏览器中测试时响应式设计不起作用