0

我有这个简单的倒计时 -

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


});

我真的只想要一个暂停/恢复按钮作为一件事

我怎么转

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

所以它切换暂停/恢复命令

编辑....

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

4

2 回答 2

1

如果您可以使用 jquery ui，您可以使用复选框来切换状态

html

<input type="checkbox" id="pauseResume" /><label for="pauseResume"></label>

javascript

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

$('#pauseResume').click(function () {  
    if ($(this).is(":checked"))
    {
        Clock.pause();
        $(this).next('label').text("Resume");
    }
    else
    {
        Clock.resume();
        $(this).next('label').text("Pause");
    }
});
$('#pauseResume').button();
$('#pauseResume').next('label').text("Pause");

});

http://jsfiddle.net/axrwkr/6usZ2

这是一个不使用 jquery ui 的，您必须自己设置复选框的样式

http://jsfiddle.net/axrwkr/qv62T

如果您只想在两个功能之间切换，请查看以下问题

jquery在两个功能之间单击/切换

于 2013-03-11T14:17:47.887 回答
0

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

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

如果 ID 未定义，则它知道它已经暂停。

于 2013-03-11T14:27:08.467 回答