jquery暂停/恢复计时器切换

我有这个简单的倒数计时器 –

$(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 inputed进行编辑/修改？

Answer 1

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

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

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

Answer 2

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

HTML

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在两个函数之间单击/切换