隐藏时如何暂停jquery计时器

时间：2016-05-13 18:07:25

标签： javascript jquery

如何在计时器隐藏时停止计时器，它会继续运行但是当计时器再次显示时它应该再次开始运行。

当它首先显示它正确启动但是它在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(){
	aNote.currentTime = 0;
	aNote.play();
});

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

	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#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 { 
 	-webkit-animation-name: bounceIn;
 	-webkit-animation-duration: 2s;
 	-webkit-animation-iteration-count: infinite;
 	-webkit-animation-timing-function: ease-out;
 	-webkit-animation-fill-mode: forwards;
	
 	animation-name: bounceIn;
 	animation-duration: 2s;
 	animation-iteration-count: infinite;
 	animation-timing-function: ease-out;
 	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">

	    <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 id="time">02:00</span> minuten</p></div>
	    </div>



	        <!--   bg   -->



	         <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>

	    </div>

1 个答案:

答案 0 :(得分：0)

要停止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>

相关问题
最新问题