如何隱藏定時器，當它在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); 
 
// }); 
 

 

 

 

 

 
\t $('.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 { 
 

 
\t margin: 0px auto; 
 
    height: 400px; 
 
\t 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%; 
 
\t } 
 

 
#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"> 
 
\t  \t <div class="activate-date"></div> 
 
\t   <div id="knop" class="animated ring-binnen"></div> 
 
\t  \t <div id="knop-deel2" class="animated ring-buiten"></div> 
 
\t  \t <p id="gaop" class="text-hint active" readonly>Ga op blind meeting</p> 
 
\t   <p id="beeindig" class="text-hint hidden" readonly>Beeindig meeting</p> 
 
\t   
 

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

 
\t \t \t 
 
\t  </div>

Answer 1

其實你是你的第二個值轉換爲字符串 '0' +秒，這不等於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) { 

}