Question

我正在尝试制作倒计时器，可以使用JS onClick()事件使用单个HTML5按钮标记暂停，或者更优选地，使用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>

Answer 1

嗯，我认为这就是你想要的。 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;
});

暂停/恢复jQuery倒数计时器

1 个答案: