jQuery的暫停/恢復定時器觸發

Question

我有這個簡單的倒數計時器 -

$(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輸入進行編輯/修改？

Answer 1

我可以從你的代碼中看到的最簡單的方法是檢查是否區間ID存在，當你點擊暫停按鈕...

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

如果ID是未定義的，那麼它知道它已經暫停。

Answer 2

如果您確定使用jQuery用戶界面，您可以使用複選框來切換狀態

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 click/toggle between two functions