javascript - 如何在还剩 0 秒时隐藏计时器

Question

当计时器为 0 分 0 秒时，我在删除事件类和添加隐藏类时遇到问题。它应该在平板电脑上使用，所以我建议检查元素并制作一个更小的浏览器，如果你想测试它的话。

var interval;

function countdown() {
  clearInterval(interval);
  interval = setInterval( function() {
      var timer = $('.js-timeout').html();
      timer = timer.split(':');
      var minutes = timer[0];
      var seconds = timer[1];
      seconds -= 1;
      if (minutes < 0) return;
      else if (seconds < 0 && minutes != 0) {
          minutes -= 1;
          seconds = 59;
      }
      else if (seconds < 10 && length.seconds != 2) seconds = '0' + seconds;

      $('.js-timeout').html(minutes + ':' + seconds);

      if (minutes == 0 && seconds == 0) clearInterval(interval);

      if (minutes === 0 && seconds === 0) {
         $('#gaop').removeClass('hidden').addClass('active');
            $('#beeindig').addClass('hidden').removeClass('active');
            $('#timer').addClass('hidden').removeClass('active');
            $('#knop').removeClass('begin-date').removeClass('shake');
            $('#knop-deel2').removeClass('begin-date').removeClass('shake');
            
      }



  }, 1000);
}

// $('#js-startTimer').click(function () {
//   $('.js-timeout').text("2:00");
//   countdown();
// });


// $('#js-resetTimer').click(function () {
//   $('.js-timeout').text("2:00");
//   clearInterval(interval);
// });





	$('.activate-date').click(function() {
        
        if ($('#gaop').hasClass('active')) {
           
            $('#gaop').removeClass('active').addClass('hidden');

            $('#beeindig').removeClass('hidden').addClass('active');

             $('#timer').removeClass('hidden').addClass('active');

            $('#knop').addClass('begin-date').addClass('shake');

            $('#knop-deel2').addClass('begin-date').addClass('shake');

            $('.js-timeout').text("2:00");
            countdown();

            

           



        } else {
            
            $('#gaop').removeClass('hidden').addClass('active');
            $('#beeindig').addClass('hidden').removeClass('active');
            $('#timer').addClass('hidden').removeClass('active');
            $('#knop').removeClass('begin-date').removeClass('shake');
            $('#knop-deel2').removeClass('begin-date').removeClass('shake');
            $('.js-timeout').text("2:00");
            clearInterval(interval);


        }
            
          
        
    }); 

div.wrapper{
    position: relative;
    
}

div.center{

position: absolute;
    left: 0;
    right: 0;
    top: 0;
    position: fixed;

}

.activate-date {
    border: 4px solid grey;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    position: fixed;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 35%;
    z-index: 3;
}
p.text-hint{
    font-family: 'Opensans-regular';
    color: black;
    font-weight: 120%;
    font-size: 1.5em;
    text-align: center;
    margin: 0 auto;
    /*position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;*/
    position: fixed;
    top: 40%;
    left: 0;
    right: 0;
}

div.center div.text-timer{
    font-family: 'Opensans-regular';
    color: black;
    font-weight: 120%;
    font-size: 0.9em;
    text-align: center;
    margin: 0 auto;
    /*position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;*/
    position: fixed;
    top: 42%;
    left: 0;
    right: 0;

}


.active{
    display: block;
}

.hidden{

    display: none;
}


#knop {

	margin: 0px auto;
    height: 400px;
	width: 400px;
    border: 10px solid white;
    border-radius: 50%;
    -webkit-box-shadow: 0 0px 60px white,
             inset 0 0 60px white;
       -moz-box-shadow: 0 0px 60px white,
            inset 0 0 60px white;
            box-shadow: 0 0px 60px white,
            inset 0 0 60px white;
            text-align: center;
    margin-top: 35%;
	}

#knop-deel2{
    margin: 0px auto;
    height: 400px;
    width: 400px;
    border: 10px solid white;
    border-radius: 50%;
    -webkit-box-shadow: 0 0px 60px white,
             inset 0 0 60px white;
       -moz-box-shadow: 0 0px 60px white,
            inset 0 0 60px white;
            box-shadow: 0 0px 60px white,
            inset 0 0 60px white;
            text-align: center;
    margin-top: 35%;

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    position: fixed;

}

<div class="center">
	    	<div class="activate-date"></div>
	        <div id="knop" class="animated ring-binnen"></div>
	    	<div id="knop-deel2" class="animated ring-buiten"></div>
	    	<p id="gaop" class="text-hint active" readonly>Ga op blind meeting</p>
	        <p id="beeindig"  class="text-hint hidden" readonly>Beeindig meeting</p>
	        

	        <div id="timer" class="text-timer hidden"><p>de meeting eindigt in <span class="js-timeout">2:00</span> minuten.</p>

			
	    </div>

Answer 1

实际上你正在将你的第二个值转换为字符串 '0'+seconds，它不等于 0，所以要么这样做

if (minutes <= 0 && seconds == "00") clearInterval(interval);
if (minutes <= 0 && seconds == "00") {

}

或者像那样做

seconds = parseInt(seconds, 10);
if (minutes <= 0 && seconds == 0) clearInterval(interval);
if (minutes <= 0 && seconds == 0) {

}