暂停/恢复jQuery倒数计时器
暂停/恢复jQuery倒数计时器
提问于 2014-02-02 22:43:52
我正在尝试制作一个倒计时器，它可以使用一个HTML5按钮标记来暂停，使用JS onClick()事件，或者更好地使用jQuery与其他函数一起使用$("#pause_resume").off('click').on('click', firstClick)之类的东西。从逻辑上讲，我假设任务需要获得$.min和$.sec的当前值，然后在切换函数时设置这些值，直到再次按下“恢复”按钮。但我真的不知道该怎么做。我看过这个站点上的其他代码和其他代码，但我所看到的是强烈反对的，不符合我的项目计划。任何洞察力都是值得赞赏的。
HTML:
<p class="timer">
<span class="min"></span>:<span class="sec"></span>/
<span class="fullTime">1:30</span>
</p>JavaScript:
<script type="text/javascript">
var timer = $('.timer');
var leadingZero = function(n) {
if (n < 10 && n >= 0)
return '0' + n;
else
return n;
};
var minutes = 1;
var seconds = 30;
setInterval(function () {
var m = $('.min', timer),
s = $('.sec', timer);
if (seconds == 0) {
minutes--;
seconds = 59;
} else {
seconds--;
}
m.text(minutes);
s.text(leadingZero(seconds));
}, 1000);
</script>回答 1
Stack Overflow用户
回答已采纳
发布于 2014-02-03 02:20:48
我想这就是你想要的。http://jsfiddle.net/joey6978/67sR2/3/
我添加了一个按钮，该按钮在单击时切换布尔值，以确定是在间隔中设置函数还是清除间隔。
var clicked=true;
var counter;
$('button').click(function(){
if(clicked){
counter=setInterval(function () {
var m = $('.min', timer),
s = $('.sec', timer);
if (seconds === 0) {
minutes--;
seconds = 59;
} else {
seconds--;
}
m.text(minutes);
s.text(leadingZero(seconds));
}, 1000);
}
else{
clearInterval(counter);
}
clicked=!clicked;
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21517252
复制相关文章
相似问题
腾讯云开发者
