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


});

私は本当に一時停止/再開ボタンが1つだけ欲しい

どうやって回すの

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

一時停止/再開コマンドを切り替えます

編集....

totalSeconds を決定するために CMS (PHP) を取得するにはどうすればよいですか? ご覧のとおり、現在は .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

2 つの機能を切り替えるだけにしたい場合は、次の質問を見てください。

jquery クリック / 2 つの機能を切り替える

于 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 に答える