我有这个简单的倒数计时器 -
$(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编辑/修改?
答案 0 :(得分: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
如果您只想在两个函数之间切换,请查看以下问题
答案 1 :(得分:0)
我从代码中看到的最简单方法是在点击暂停按钮时检查区间ID是否存在...
$('#pauseButton').click(function () {
if (Clock.interval) {
Clock.pause();
} else {
Clock.resume();
}
});
如果ID未定义,则表示它已经暂停。