如何在隱藏時暫停jQuery定時器

Question

如何在定時器停止時隱藏它只是繼續運行，但它應該在再次顯示時再次開始運行。

當它首先被顯示時，它會正確啓動，但它會一直運行，而t被隱藏，但應該在再次顯示時開始運行。

它應用於平板電腦，所以我建議在檢查小屏幕中的元素時運行它。

// document.addEventListener('touchstart', this.touchstart); 
 
document.addEventListener('touchmove', this.touchmove); 
 

 
// function touchstart(e) { 
 
//  e.preventDefault() 
 
// } 
 

 
function touchmove(e) { 
 
    e.preventDefault() 
 
} 
 

 
var aNote = document.getElementById('aAudio') 
 
$('#ring-animatie').mouseover(function(){ 
 
\t aNote.currentTime = 0; 
 
\t aNote.play(); 
 
}); 
 

 
\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'); 
 

 

 

 
     } 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'); 
 

 
     } 
 
      
 
      $.ajax({ url: 'https://18003.hosts.ma-cloud.nl/light/script.php', 
 
     data: { 
 
      'hoi': 'hoi' 
 
     }, 
 
     type: 'post', 
 
     success: function(output) { 
 
\t \t console.log(output); 
 
      //if(checkCount == counter){ location.reload(); } 
 
     } 
 
    }); 
 
     
 
    }); 
 

 

 

 
function startTimer(duration, display) { 
 
    var timer = duration, minutes, seconds; 
 
    setInterval(function() { 
 
     minutes = parseInt(timer/60, 10) 
 
     seconds = parseInt(timer % 60, 10); 
 

 
     minutes = minutes < 10 ? "0" + minutes : minutes; 
 
     seconds = seconds < 10 ? "0" + seconds : seconds; 
 

 
     display.text(minutes + ":" + seconds); 
 

 
     if (--timer < 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'); 
 
      timer = duration; 
 

 
      
 
     } 
 

 

 
    }, 1000); 
 
} 
 

 
jQuery(function ($) { 
 
    var twoMinutes = 60 * 2, 
 
     display = $('#time'); 
 
    startTimer(twoMinutes, display); 
 
});

/* CSS Document */ 
 

 
@import url(http://fonts.googleapis.com/css?family=Open+Sans); 
 
@import url(http://fonts.googleapis.com/css?family=Bree+Serif); 
 

 
@font-face { 
 
    font-family: 'Opensans-regular'; 
 
    src: url(../fonts/OpenSans-Regular.ttf); 
 
} 
 

 

 

 
body { 
 
    background: url(../img/mockup_bg.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    background-color: black; 
 
    font-size:22px; 
 
    line-height: 32px; 
 
    color: #ffffff; 
 
    word-wrap:break-word !important; 
 
    font-family: 'Open Sans', sans-serif; 
 
    height: 100vh; 
 
    overflow: hidden; 
 
    } 
 

 

 
h1 { 
 
    font-size: 60px; 
 
    text-align: center; 
 
    color: #FFF; 
 
} 
 

 
h3 { 
 
    font-size: 30px; 
 
    text-align: center; 
 
    color: #FFF; 
 
} 
 

 
h3 a { 
 
    color: #FFF; 
 
} 
 

 
a { 
 
    color: #FFF; 
 
} 
 
h1 {margin-top: 100px; 
 
    text-align:center; 
 
    font-size:60px; 
 
    font-family: 'Bree Serif', 'serif'; 
 
    } 
 

 
p { 
 
    text-align: center; 
 
} 
 

 

 
div.wrapper{ 
 
    position: relative; 
 
    
 
} 
 

 
div.center{ 
 

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

 
} 
 

 
.activate-date { 
 
    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: white; 
 
    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: white; 
 
    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#knop.begin-date, 
 
div#knop-deel2.begin-date{ 
 
    border: 12px solid #c91c71; 
 
    -webkit-box-shadow: 0 0px 60px #c91c71, 
 
      inset 0 0 60px red; 
 
     -moz-box-shadow: 0 0px 60px #c91c71, 
 
      inset 0 0 60px #c91c71; 
 
      box-shadow: 0 0px 60px #c91c71, 
 
      inset 0 0 60px #c91c71; 
 
} 
 

 
.animated { 
 
    \t -webkit-animation-name: bounceIn; 
 
    \t -webkit-animation-duration: 2s; 
 
    \t -webkit-animation-iteration-count: infinite; 
 
    \t -webkit-animation-timing-function: ease-out; 
 
    \t -webkit-animation-fill-mode: forwards; 
 
\t 
 
    \t animation-name: bounceIn; 
 
    \t animation-duration: 2s; 
 
    \t animation-iteration-count: infinite; 
 
    \t animation-timing-function: ease-out; 
 
    \t animation-fill-mode: forwards; 
 
} 
 

 
    
 
/* 
 
* Animation for webkit 
 
*/ 
 
@-webkit-keyframes bounce { 
 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
 
    40% {-webkit-transform: translateY(-30px);} 
 
    60% {-webkit-transform: translateY(-15px);} 
 
} 
 
    
 
@keyframes bounce { 
 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
 
    40% {transform: translateY(-30px);} 
 
    60% {transform: translateY(-15px);} 
 
} 
 
    
 
/* 
 
* Adding the animation to our element 
 
*/ 
 
.bounce { 
 
    -webkit-animation-name: bounce; 
 
    animation-name: bounce; 
 
} 
 

 

 
/* 
 
ring-binnen 
 
*/ 
 
    
 
@-webkit-keyframes ring-binnen { 
 
    0% { transform: scale(1); } 
 
    25% { transform: scale(0.9);} 
 
    48% { transform: scale(1.15);} 
 
    50% { transform: scale(1.2); } 
 
    75% { transform: scale(1.05);} 
 
    100% { transform: scale(1); } 
 
} 
 
@keyframes ring-binnen { 
 
    0% { transform: scale(1); } 
 
    25% { transform: scale(0.9);} 
 
    48% { transform: scale(1.15);} 
 
    50% { transform: scale(1.2); } 
 
    75% { transform: scale(1.05);} 
 

 
    100% { transform: scale(1); } 
 
} 
 
.ring-binnen { 
 
    -webkit-animation-name: ring-binnen; 
 
    animation-name: ring-binnen; 
 
} 
 

 

 
/* 
 
ring-buiten 
 
*/ 
 
    
 
@-webkit-keyframes ring-buiten{ 
 
    0% { transform: scale(1); opacity: 0; } 
 
    25% { transform: scale(0.9);} 
 
    48% { transform: scale(1.15);} 
 
    50% { transform: scale(1.2); opacity: 1;} 
 
    75% { transform: scale(1.25);opacity: 1;} 
 
    85% { transform: scale(1.4); opacity: 0.5;} 
 
    100% { transform: scale(1.45); opacity: 0; } 
 
} 
 
@keyframes ring-buiten { 
 
    0% { transform: scale(1); opacity: 0; } 
 
    25% { transform: scale(0.9);} 
 
    48% { transform: scale(1.15);} 
 
    50% { transform: scale(1.2); opacity: 1;} 
 
    75% { transform: scale(1.25);opacity: 1;} 
 
    85% { transform: scale(1.4); opacity: 0.5;} 
 
    100% { transform: scale(1.45); opacity: 0; } 
 
} 
 
.ring-buiten { 
 
    -webkit-animation-name: ring-buiten; 
 
    animation-name: ring-buiten; 
 
} 
 

 

 
/* 
 
* Flash animation 
 
*/ 
 
    
 
@-webkit-keyframes flash { 
 
    0%, 50%, 100% {opacity: 1;} 
 
    25%, 75% {opacity: 0;} 
 
} 
 
@keyframes flash { 
 
    0%, 50%, 100% {opacity: 1;} 
 
    25%, 75% {opacity: 0;} 
 
} 
 
.flash { 
 
    -webkit-animation-name: flash; 
 
    animation-name: flash; 
 
} 
 

 

 
/* 
 
* Shake animation 
 
*/ 
 
    
 
@-webkit-keyframes shake { 
 
    0%, 100% {-webkit-transform: translateX(0);} 
 
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} 
 
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} 
 
} 
 
@keyframes shake { 
 
    0%, 100% {transform: translateX(0);} 
 
    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 
 
    20%, 40%, 60%, 80% {transform: translateX(10px);} 
 
} 
 
.shake { 
 
    -webkit-animation-name: shake; 
 
    animation-name: shake; 
 
} 
 

 

 

 

 
/**************************************/ 
 
/***********background bellen**********/ 
 
/**************************************/ 
 

 
.bg-bel{ 
 
    height: 30px; 
 
    width: 30px; 
 
    position: fixed; 
 
    border: 4px solid #7ccced; 
 
    border-radius: 50%; 
 
    -webkit-box-shadow: 0 0px 6px white, 
 
      inset 0 0 6px white; 
 
     -moz-box-shadow: 0 0px 6px white, 
 
      inset 0 0 6px white; 
 
      box-shadow: 0 0px 6px white, 
 
      inset 0 0 6px white; 
 
      z-index: -20; 
 
} 
 

 

 

 
.animated-bg { 
 
    -webkit-animation-name: bounceIn; 
 
    -webkit-animation-duration: 30s; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-timing-function: ease-out; 
 
    -webkit-animation-fill-mode: forwards; 
 
    
 
    animation-name: bounceIn; 
 
    animation-duration: 30s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: ease-out; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
/* 
 
bg ring 1 
 
*/ 
 
    
 
@-webkit-keyframes bg-ring { 
 
    0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    50% {/*top: 76%; left: 40%; bottom: 20%; right: 60%;*/ opacity: 1; transform: scale(1);} 
 
    /* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/ 
 
    100% { top: 110%; left: 30%; bottom: -10%; right: 70%;} 
 
} 
 
@keyframes bg-ring { 
 
    0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    50% {/*top: 76%; left: 40%; bottom: 20%; right: 60%;*/ opacity: 1; transform: scale(1);} 
 
    /* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/ 
 
    100% { top: 102%; left: 30%; bottom: -10%; right: 70%;} 
 
} 
 
.bg-ring { 
 
    -webkit-animation-name: bg-ring; 
 
    animation-name: bg-ring; 
 
} 
 

 
/* 
 
bg ring 2 
 
*/ 
 
    
 
@-webkit-keyframes bg-ringtwee { 
 
    0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    50% {/*top: 20%; left: 60%; bottom: 76%; right: 40%;*/ opacity: 1; transform: scale(1);} 
 
    /* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/ 
 
    100% { top: -10%; left: 70%; bottom: 102%; right: 30%;} 
 
} 
 
@keyframes bg-ringtwee { 
 
    0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    50% {/*top: 20%; left: 60%; bottom: 76%; right: 40%; opacity:*/ 1; transform: scale(1);} 
 
    /* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/ 
 
    100% { top: -10%; left: 70%; bottom: 102%; right: 30%;} 
 
} 
 
.bg-ringtwee { 
 
    border: #7ccced; 
 
    -webkit-animation-name: bg-ringtwee; 
 
    animation-name: bg-ringtwee; 
 
} 
 

 
/* 
 
bg ring 3 
 
*/ 
 
    
 
@-webkit-keyframes bg-ringdrie { 
 
    0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    50% {/*top: 40%; left: 76%; bottom: 60%; right: 20%;*/ opacity: 1; transform: scale(1);} 
 
    /* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/ 
 
    100% { top: 30%; left: 102%; bottom: 70%; right: -10%;} 
 
} 
 
@keyframes bg-ringdrie { 
 
    0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    50% {/*top: 40%; left: 76%; bottom: 60%; right: 20%; opacity:*/ 1; transform: scale(1);} 
 
    /* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/ 
 
    100% { top: 30%; left: 102%; bottom: 70%; right: -10%;} 
 
} 
 
.bg-ringdrie { 
 
    border: #7ccced; 
 
    -webkit-animation-name: bg-ringdrie; 
 
    animation-name: bg-ringdrie; 
 
} 
 

 
/* 
 
bg ring 4 
 
*/ 
 
    
 
@-webkit-keyframes bg-ringvier{ 
 
    0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    50% {/*top: 60%; left: 20%; bottom: 40%; right: 76%;*/ opacity: 1; transform: scale(1);} 
 
    /* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/ 
 
    100% { top: 70%; left: -10%; bottom: 30%; right: 102%;} 
 
} 
 
@keyframes bg-ringvier { 
 
    0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    50% {/*top: 60%; left: 20%; bottom: 20%; right: 76%;*/ opacity: 1; transform: scale(1);} 
 
    /* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/ 
 
    100% { top: 70%; left: -10%; bottom: 30%; right: 102%;} 
 
} 
 
.bg-ringvier { 
 
    -webkit-animation-name: bg-ringvier; 
 
    animation-name: bg-ringvier; 
 
} 
 

 
/* 
 
bg ring 7 
 
*/ 
 
    
 
@-webkit-keyframes bg-ringzeven{ 
 
    0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    50% {/*top: 50%; left: 50%; bottom: 50%; right: 76%;*/ opacity: 1; transform: scale(1);} 
 
    /* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/ 
 
    100% { top: 50%; left: -2%; bottom: 50%; right: 102%;} 
 
} 
 
@keyframes bg-ringzeven { 
 
    0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    50% {/*top: 50%; left: 20%; bottom: 50%; right: 76%;*/ opacity: 1; transform: scale(1);} 
 
    /* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/ 
 
    100% { top: 50%; left: -2%; bottom: 50%; right: 102%;} 
 
} 
 
.bg-ringzeven { 
 
    border: #7ccced; 
 
    -webkit-animation-name: bg-ringzeven; 
 
    animation-name: bg-ringzeven; 
 
} 
 

 
/* 
 
bg ring 6 
 
*/ 
 
    
 
@-webkit-keyframes bg-ringzes{ 
 
    0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    50% {/*top: 50%; left: 76%; bottom: 50%; right: 20%;*/ opacity: 1; transform: scale(1);} 
 
    /* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/ 
 
    100% { top: 50%; left: 102%; bottom: 50%; right: -10%;} 
 
} 
 
@keyframes bg-ringzes { 
 
    0% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    50% {/*top: 50%; left: 76%; bottom: 50%; right: 20%;*/ opacity: 1; transform: scale(1);} 
 
    /* 25% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%;} 
 
    75% { top: 50%; left: 50%; bottom: 50%; right: 50%;}*/ 
 
    100% { top: 50%; left: 122%; bottom: 50%; right: -20%;} 
 
} 
 
.bg-ringzes { 
 
    -webkit-animation-name: bg-ringzes; 
 
    animation-name: bg-ringzes; 
 
} 
 

 
/* 
 
bg ring 8 
 
*/ 
 
    
 
@-webkit-keyframes bg-ringacht{ 
 
    0% { top: 50%; left: 76%; bottom: 50%; right: 100%; opacity: 1; transform: scale(1);} 
 

 
    48% { opacity: 1; transform: scale(1);} 
 
    49% { top: 50%; left: 122%; bottom: 50%; right: -20%; opacity: 0; transform: scale(0);} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    
 

 
    100% { top: 50%; left: 76%; bottom: 50%; right: 100%; opacity: 1; transform: scale(1);} 
 
} 
 
@keyframes bg-ringacht { 
 
    0% { top: 50%; left: 76%; bottom: 50%; right: 10%; opacity: 1; transform: scale(1);} 
 

 
    48% { opacity: 1; transform: scale(1);} 
 
    49% { top: 50%; left: 122%; bottom: 50%; right: -20%; opacity: 0; transform: scale(0);} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    
 

 
    100% { top: 50%; left: 76%; bottom: 50%; right: 10%; opacity: 1; transform: scale(1);} 
 
} 
 
.bg-ringacht { 
 
    -webkit-animation-name: bg-ringacht; 
 
    animation-name: bg-ringacht; 
 
} 
 

 
/* 
 
bg ring 9 
 
*/ 
 
    
 
@-webkit-keyframes bg-ringnegen{ 
 
    0% { top: 50%; left: 76%; bottom: 50%; right: 100%; opacity: 1; transform: scale(1);} 
 

 
    48% { opacity: 1; transform: scale(1);} 
 
    49% { top: 50%; left: 122%; bottom: 50%; right: -20%; opacity: 0; transform: scale(0);} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    
 

 
    100% { top: 50%; left: 76%; bottom: 50%; right: 100%; opacity: 1; transform: scale(1);} 
 
} 
 
@keyframes bg-ringnegen { 
 
    0% { top: 50%; left: 10%; bottom: 50%; right: 76%; opacity: 1; transform: scale(1);} 
 

 
    48% { opacity: 1; transform: scale(1);} 
 
    49% { top: 50%; left: -20%; bottom: 50%; right: 122%; opacity: 0; transform: scale(0);} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    
 

 
    100% { top: 50%; left: 10%; bottom: 50%; right: 76%; opacity: 1; transform: scale(1);} 
 
} 
 
.bg-ringnegen { 
 
    -webkit-animation-name: bg-ringnegen; 
 
    animation-name: bg-ringnegen; 
 
} 
 

 
/* 
 
bg ring 10 
 
*/ 
 
    
 
@-webkit-keyframes bg-ringtien{ 
 
    0% { top: 85%; left: 85%; bottom: 15%; right: 15%; opacity: 1; transform: scale(1);} 
 

 
    48% { opacity: 1; transform: scale(1);} 
 
    49% { top: 120%; left: 120%; bottom: -20%; right: -20%; opacity: 0; transform: scale(0);} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    
 

 
    100% { top: 85%; left: 85%; bottom: 15%; right: 15%; opacity: 1; transform: scale(1);} 
 
} 
 
@keyframes bg-ringtien { 
 
    0% { top: 85%; left: 85%; bottom: 15%; right: 15%; opacity: 1; transform: scale(1);} 
 

 
    48% { opacity: 1; transform: scale(1);} 
 
    49% { top: 120%; left: 120%; bottom: -20%; right: -20%; opacity: 0; transform: scale(0);} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    
 

 
    100% { top: 85%; left: 85%; bottom: 15%; right: 15%; opacity: 1; transform: scale(1);} 
 
} 
 
.bg-ringtien { 
 
    -webkit-animation-name: bg-ringtien; 
 
    animation-name: bg-ringtien; 
 
} 
 

 
/* 
 
bg ring 11 
 
*/ 
 
    
 
@-webkit-keyframes bg-ringelf{ 
 
    0% { top: 85%; left: 85%; bottom: 15%; right: 15%; opacity: 1; transform: scale(1);} 
 

 
    48% { opacity: 1; transform: scale(1);} 
 
    49% { top: 120%; left: 120%; bottom: -20%; right: -20%; opacity: 0; transform: scale(0);} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    
 

 
    100% { top: 85%; left: 85%; bottom: 15%; right: 15%; opacity: 1; transform: scale(1);} 
 
} 
 
@keyframes bg-ringelf { 
 
    0% { top: 15%; left: 15%; bottom: 85%; right: 85%; opacity: 1; transform: scale(1);} 
 

 
    48% { opacity: 1; transform: scale(1);} 
 
    49% { top: -20%; left: -20%; bottom: 120%; right: 120%; opacity: 0; transform: scale(0);} 
 
    50% { top: 50%; left: 50%; bottom: 50%; right: 50%; opacity: 0; transform: scale(0);} 
 
    
 

 
    100% { top: 15%; left: 15%; bottom: 85%; right: 85%; opacity: 1; transform: scale(1);} 
 
} 
 
.bg-ringelf { 
 
    -webkit-animation-name: bg-ringelf; 
 
    animation-name: bg-ringelf; 
 
}

<div class="wrapper"> 
 

 
\t  <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   <div id="timer" class="text-timer hidden"><p> de meeting eindigt in <span id="time">02:00</span> minuten</p></div> 
 
\t  </div> 
 

 

 

 
\t   <!-- bg --> 
 

 

 

 
\t   <div class="bg-bel animated-bg bg-ring"></div> 
 

 
    <div class="bg-bel animated-bg bg-ringtwee"></div> 
 

 
    <div class="bg-bel animated-bg bg-ringdrie"></div> 
 

 
    <div class="bg-bel animated-bg bg-ringvier"></div> 
 

 
    <div class="bg-bel animated-bg bg-ringzeven"></div> 
 

 
    <div class="bg-bel animated-bg bg-ringzes"></div> 
 

 
    <div class="bg-bel animated-bg bg-ringacht"></div> 
 

 
    <div class="bg-bel animated-bg bg-ringnegen"></div> 
 

 
    <div class="bg-bel animated-bg bg-ringtien"></div> 
 

 
    <div class="bg-bel animated-bg bg-ringelf"></div> 
 

 
\t  </div>

Answer 1

停止setInterval()你應該使用clearInterval() ..所以你可以嘗試

function startTimer(duration, display) { 
    var timer = duration, minutes, seconds; 
    return setInterval(function() { // add return here 
     minutes = parseInt(timer/60, 10) 
     seconds = parseInt(timer % 60, 10); 

     minutes = minutes < 10 ? "0" + minutes : minutes; 
     seconds = seconds < 10 ? "0" + seconds : seconds; 

     display.text(minutes + ":" + seconds); 

     if (--timer < 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'); 
      timer = duration; 


     } 


    }, 1000); 
} 

和

jQuery(function ($) { 
    var twoMinutes = 60 * 2, 
     display = $('#time'); 
    var interval = startTimer(twoMinutes, display); 

    // then you can simply use in the event you want 

    clearInterval(interval); 
}); 

，如果你想clearInterval()內setInterval()你可以嘗試

function startTimer(duration, display) { 
    var timer = duration, minutes, seconds; 
    var interval = setInterval(function() { 
     minutes = parseInt(timer/60, 10) 
     seconds = parseInt(timer % 60, 10); 

     minutes = minutes < 10 ? "0" + minutes : minutes; 
     seconds = seconds < 10 ? "0" + seconds : seconds; 

     display.text(minutes + ":" + seconds); 

     if (--timer < 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'); 
      timer = duration; 


     }else{ 
      clearInterval(interval); 
     } 


    }, 1000); 
} 

示例如何使用setInterval()和clearInterval();

$(document).ready(function(){ 
 
    var interval; 
 
    
 
    $('#startTimer').on('click', function(){ 
 
     interval = startTimer(); 
 
    }); 
 
    
 
    $('#stopTimer').on('click', function(){ 
 
     stopTimer(interval); 
 
    }); 
 
}); 
 

 
var i = 0; 
 

 
function startTimer(){ 
 
return setInterval(function(){ 
 
     $('div').text(i + 1); 
 
     i++; 
 
    } , 1000); 
 
} 
 

 
function stopTimer(inter){ 
 
    clearInterval(inter); 
 
}

div{ 
 
    font-size: 20px; 
 
    background : red; 
 
    color: #fff; 
 
    padding : 5px; 
 
    text-align : center; 
 
} 
 

 
button{ 
 
    padding : 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div>0</div> 
 
<button id="startTimer">Start Timer</button> 
 
<button id="stopTimer">Stop Timer</button>