如何在隐藏时暂停jquery计时器
how to pause a jquery timer when hidden
当计时器隐藏时，我该如何停止它？它只是继续运行，但当它再次显示时，它应该再次开始运行。
当它最初被显示时，它正确启动，但在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>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);
});
如果你想在setInterval()中使用clearInterval()，你可以尝试
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>相关文章：
- jQuery循环在特定位置暂停
- jQuery:暂停按钮可以暂停所有其他操作
- 如何暂停和恢复jquery间隔
- 如何在隐藏时暂停jquery计时器
- 在 jquery 中定位暂停和播放按钮
- jQuery:如何正确地暂停递归
- jQuery中可暂停的打字机效果
- Jquery:无限循环和暂停
- 如何使即兴 jquery 暂停当前函数执行
- Jquery 函数创建一个异常的暂停
- 如何暂停和重新启动jquery数据表插件
- 可以暂停jquery中的主窗口
- 鼠标悬停暂停jQuery
- 在鼠标悬停时暂停 Jquery 脚本
- 如何在等待用户输入的同时暂停jQuery.ech(）循环
- 如何从另一个onclick事件中停止/暂停jquery更改事件的执行
- 暂停jQuery就绪事件，直到多个HTML DOM更新完成
- 暂停jQuery点击按钮
- 鼠标悬停时自动播放/暂停JQuery
- 如何暂停jQuery代码几毫秒
