タイマーが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と等しくない+秒、あなたの第2の値を変換している実際

ので、どちらかが

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

} 

のようにそれを行うか、それを行いますlike

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

}