jQuery的暂停/恢复计时器切换 [英] jquery pause/resume timer toggle

问题描述

我有一个简单的倒数计时器-

I've got this simple countdown timer -

$(document).ready(function() {

var Clock = {
    totalSeconds: 800,

    start: function () {
        var self = this;

        this.interval = setInterval(function () {
            self.totalSeconds -= 1;

            $("#hour").text(Math.floor(self.totalSeconds / 3600));
            $("#min").text(Math.floor(self.totalSeconds / 60 % 60));
            $("#sec").text(parseInt(self.totalSeconds % 60));
        }, 1000);
    },

    pause: function () {
        clearInterval(this.interval);
        delete this.interval;
    },

    resume: function () {
        if (!this.interval) this.start();
    }
};

Clock.start();

$('#pauseButton').click(function () { Clock.pause(); });
$('#resumeButton').click(function () { Clock.resume(); });


});

我真的只希望将暂停/恢复按钮作为一件事

I really only want a pause/resume button as one thing

我怎么转身

$('#pauseButton').click(function () { Clock.pause(); });

因此它可以切换暂停/恢复命令

so it toggles the pause/resume command

编辑......

我如何获得CMS(PHP)来确定totalSeconds是多少?如您所见，它当前将位于.js文件中，所以我想我需要将totalSeconds添加到html/php页面的底部，并通过输入的cms进行编辑/修改吗?

how would I get a CMS (PHP) to decide what the totalSeconds is? As you can see it's currently going to be in a .js file so I guess I need the totalSeconds to be added at the bottom of the html/php page and edited/amended by the cms inputed?

推荐答案

我从您的代码中看到的最简单的方法是，当您单击暂停按钮时检查间隔ID是否存在...

The easiest way I can see from your code is to check whether the interval ID exists when you click the pause button...

$('#pauseButton').click(function () {
    if (Clock.interval) {
        Clock.pause();
    } else { 
        Clock.resume();
    }
});

如果ID未定义，则表明它已经暂停.

if the ID is undefined then it knows it's already paused.

这篇关于jQuery的暂停/恢复计时器切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！