Countdown gaat verder onder nul na pagina verversen
Ik heb wederom een probleem ondervonden met mijn countdown script. Wanneer de teller klaar is blijft hij op 0:00 staan. Dat is prima, al zie ik hier dan liever: "Klaar!" komen te staan. Maar dat is van latere zorg. Alleen wanneer ik de pagina ververs gaat de teller verder met min getallen: `-1:0-2:0-44`. Terwijl de code (in mijn ogen) toch duidelijk aangeeft dat het moet stoppen als het de 0 seconden bereikt heeft. Hier mijn code ter demonstratie:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(window).load(function(){
$('tr[id]').each(function() {
var $this = $(this);
var count = parseInt($this.attr("id"));
countdown = setInterval(function() {
var days = Math.floor(count/(60*60*24));
var hours = Math.floor(count/(60*60))%24;
var mins = Math.floor(count/60)%60;
var secs = count%60;
$('.remain', $this).html(((hours !=0) ? hours + ":" : "") + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs);
if (count-- == 0) {
//do something
clearInterval(countdown);
}
}, 1000);
});
});
$('tr[id]').each(function() {
var $this = $(this);
var count = parseInt($this.attr("id"));
countdown = setInterval(function() {
var days = Math.floor(count/(60*60*24));
var hours = Math.floor(count/(60*60))%24;
var mins = Math.floor(count/60)%60;
var secs = count%60;
$('.remain', $this).html(((hours !=0) ? hours + ":" : "") + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs);
if (count-- == 0) {
//do something
clearInterval(countdown);
}
}, 1000);
});
});
De seconden worden gegenereerd door een tijdverschil in seconden van time(); en de tijd in de database.
Code (php)
1
$tijd = strtotime($row['laatste_keer']) - time();
Weet iemand hier misschien een oplossing voor? Het zou me enorm helpen...
Als je het omdraait kan je ook gelijk dat andere meenemen, dus:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
if (count-- > 0) {
$('.remain').html(//en hierachter jouw riedeltje
}
else {
$('.remain').html('Klaar!!');
}
$('.remain').html(//en hierachter jouw riedeltje
}
else {
$('.remain').html('Klaar!!');
}
Edit: Iets te snel geroepen, als ik nu meerdere countdowns op één pagina heb, met verschillende tijden, gaat het goed totdat één teller op nul seconden komt. Dan gaan alle tellers op `Klaar!!`. Terwijl als ik in de bron kijk, staat er bijvoorbeeld gewoon `id=190`. Is het op deze manier niet mogelijk om meerdere countdowns te hebben op één pagina?
Gewijzigd op 01/12/2012 13:25:34 door Richard Hansma
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(window).load(function() {
$('tr[id]').each(function() {
var $this = $(this);
var count = parseInt($this.attr("id"));
countdown = setInterval(function() {
var days = Math.floor(count / (60 * 60 * 24));
var hours = Math.floor(count / (60 * 60)) % 24;
var mins = Math.floor(count / 60) % 60;
var secs = count % 60;
if (count-- > 0) {
$('.remain', $this).html(((hours != 0) ? hours + ":" : "") + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs);
}
else {
$('.remain').html('Klaar!!');
clearInterval(countdown);
}
}, 1000);
});
});
$('tr[id]').each(function() {
var $this = $(this);
var count = parseInt($this.attr("id"));
countdown = setInterval(function() {
var days = Math.floor(count / (60 * 60 * 24));
var hours = Math.floor(count / (60 * 60)) % 24;
var mins = Math.floor(count / 60) % 60;
var secs = count % 60;
if (count-- > 0) {
$('.remain', $this).html(((hours != 0) ? hours + ":" : "") + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs);
}
else {
$('.remain').html('Klaar!!');
clearInterval(countdown);
}
}, 1000);
});
});
Ik heb jouw code erbij gedaan zoals ik dacht dat het hoorde.
Ik heb trouwens ook geprobeerd om
Code (php)
1
$('.remain').html('Klaar!!');
Code (php)
1
$('.remain', $this).html('Klaar!!');
Gewijzigd op 01/12/2012 13:39:53 door Richard Hansma
Dan kan je dit doen:
Code (php)
1
countdown[$(this).atrr("id")] = setInterval(downCounter($(this), 1000)
En dan een aparte functie maken voor wat je nu binnen de foreach doet.
<span id="counter1" class="remain" rel="3600">
Dan kan je in JS dit doen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php //voor de kleurtjes
function downCounter (thespan) {
//je kan een heel DOM element in argument van een functie meegeven
count = parseInt($(thespan).attr("rel")) - 1;
if (count > 0) {
$(thespan).html(((hours !=0) ? hours + ":" : "") + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs);
$(thespan).attr("rel") = count;
}
else {
$(thespan).html("Klaar!");
clearInterval(countdown[$(thespan).attr("id")]);
}
}
var countdown = new Array();
$(window).load(function(){
$(".remain").each(function() {
countdown[$(this).attr("id")] = setInterval(downCounter($(this)), 1000);
});
});
?>
function downCounter (thespan) {
//je kan een heel DOM element in argument van een functie meegeven
count = parseInt($(thespan).attr("rel")) - 1;
if (count > 0) {
$(thespan).html(((hours !=0) ? hours + ":" : "") + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs);
$(thespan).attr("rel") = count;
}
else {
$(thespan).html("Klaar!");
clearInterval(countdown[$(thespan).attr("id")]);
}
}
var countdown = new Array();
$(window).load(function(){
$(".remain").each(function() {
countdown[$(this).attr("id")] = setInterval(downCounter($(this)), 1000);
});
});
?>
setInterval geeft een id terug, omdat je meerdere timers op je pagina hebt, kan je deze id's beter in array zetten zodat je ze ook afzonderlijk kunt stoppen.
Ik wil je overigens enorm bedanken voor alle moeite die je voor me doet.
Dat je het nog niet voor elkaar hebt ligt niet alleen aan jou, ik heb ook een paar foutjes gemaakt.
Met setInterval kan je niet zomaar argumenten in een functie meegeven, en ik was nog wat variabelen vergeten.
Deze code werkt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
function downCounter (id) {
//je kan een heel DOM element in argument van een functie meegeven
var el = "#" + id;
count = parseInt($(el).attr("rel")) - 1;
var days = Math.floor(count / (60 * 60 * 24));
var hours = Math.floor(count / (60 * 60)) % 24;
var mins = Math.floor(count / 60) % 60;
var secs = count % 60;
if (count > 0) {
$(el).html(((hours !=0) ? hours + ":" : "") + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs);
$(el).attr("rel", count);
}
else {
$(el).html("Klaar!");
clearInterval(countdown[id]);
}
}
var countdown = new Array();
$(document).ready(function(){
$(".remain").each(function() {
el = $(this).attr("id");
countdown[el] = setInterval(function() {downCounter(el);}, 1000);
});
});
</script>
function downCounter (id) {
//je kan een heel DOM element in argument van een functie meegeven
var el = "#" + id;
count = parseInt($(el).attr("rel")) - 1;
var days = Math.floor(count / (60 * 60 * 24));
var hours = Math.floor(count / (60 * 60)) % 24;
var mins = Math.floor(count / 60) % 60;
var secs = count % 60;
if (count > 0) {
$(el).html(((hours !=0) ? hours + ":" : "") + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs);
$(el).attr("rel", count);
}
else {
$(el).html("Klaar!");
clearInterval(countdown[id]);
}
}
var countdown = new Array();
$(document).ready(function(){
$(".remain").each(function() {
el = $(this).attr("id");
countdown[el] = setInterval(function() {downCounter(el);}, 1000);
});
});
</script>
Gewijzigd op 02/12/2012 12:08:47 door Ger van Steenderen
Ik dacht dat ik deze versie had uitgetest, maar schijnbaar vergeten te 'uploaden'. Dit werkt in ieder geval:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<span id="counter1" class="remain" rel="131"></span><br>
<span id="counter2" class="remain" rel="40"></span>
<script>
function downCounter () {
//je kan een heel DOM element in argument van een functie meegeven
$(".remain").each(function() {
count = parseInt($(this).attr("rel")) - 1;
var days = Math.floor(count / (60 * 60 * 24));
var hours = Math.floor(count / (60 * 60)) % 24;
var mins = Math.floor(count / 60) % 60;
var secs = count % 60;
if (count > 0) {
$(this).html(((hours !=0) ? hours + ":" : "") + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs);
$(this).attr("rel", count);
}
else {
$(this).html("Klaar!");
processed++;
}
});
if (processed == howmany) clearInterval(countdown);
}
var countdown = 0;
var howmany = 0;
var processed = 0;
$(document).ready(function(){
$(".remain").each(function() {
howmany++;
});
countdown = setInterval(downCounter, 1000);
});
</script>
<span id="counter2" class="remain" rel="40"></span>
<script>
function downCounter () {
//je kan een heel DOM element in argument van een functie meegeven
$(".remain").each(function() {
count = parseInt($(this).attr("rel")) - 1;
var days = Math.floor(count / (60 * 60 * 24));
var hours = Math.floor(count / (60 * 60)) % 24;
var mins = Math.floor(count / 60) % 60;
var secs = count % 60;
if (count > 0) {
$(this).html(((hours !=0) ? hours + ":" : "") + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs);
$(this).attr("rel", count);
}
else {
$(this).html("Klaar!");
processed++;
}
});
if (processed == howmany) clearInterval(countdown);
}
var countdown = 0;
var howmany = 0;
var processed = 0;
$(document).ready(function(){
$(".remain").each(function() {
howmany++;
});
countdown = setInterval(downCounter, 1000);
});
</script>
Gewijzigd op 02/12/2012 16:59:01 door Ger van Steenderen
Gewijzigd op 02/12/2012 17:06:12 door Richard Hansma