Countdown gaat verder onder nul na pagina verversen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Advanced Mendix Developer Order Management Systeme

Advanced Mendix Developer Order Management Systemen (NL) Den Haag HBO/WO IT Professional "Als Advanced Mendix Developer impact maken op de groeiende e-commerce markt? Je doet dit bij PostNL door met je DevOps team onze Mendix applicaties verder te ontwikkelen, waarbij je complexe logistieke business processen vertaalt naar applicaties die ons primaire proces ondersteunen". Wat ga je doen? PostNL wordt een postal tech company We nemen de ontwikkeling van onze IT applicaties in eigen hand door onze eigen software-ontwikkel-capability op te zetten. Als Advanced Mendix Developer ben je onderdeel van een multidisciplinair, agile werkend Business-IT-team. Samen met dit team bouw je onze logistieke IT-applicaties verder

Bekijk vacature »

Richard Hansma

Richard Hansma

30/11/2012 23:03:50
Quote Anchor link
Beste PHP-ers,

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)
PHP script in nieuw venster Selecteer het PHP script
1
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);
    });
});

De seconden worden gegenereerd door een tijdverschil in seconden van time(); en de tijd in de database.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$tijd = strtotime($row['laatste_keer']) - time();


Weet iemand hier misschien een oplossing voor? Het zou me enorm helpen...
 
PHP hulp

PHP hulp

08/12/2021 13:56:25
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

01/12/2012 08:55:11
Quote Anchor link
Ik vermoed dat dan $tijd negatief is en je controleert op == 0
Als je het omdraait kan je ook gelijk dat andere meenemen, dus:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
if (count-- > 0) {
    $('.remain').html(//en hierachter jouw riedeltje
}
else {
    $('.remain').html('Klaar!!');
}
 
Richard Hansma

Richard Hansma

01/12/2012 12:48:46
Quote Anchor link
Hartstikke bedankt Ger, het is ongelooflijk hoe simpel het altijd is als een ander het laat zien...

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
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

01/12/2012 13:31:38
Quote Anchor link
Jawel, ik heb niet helemaal jouw code overgenomen (met de $this).
 
Richard Hansma

Richard Hansma

01/12/2012 13:34:14
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
    });
});

Ik heb jouw code erbij gedaan zoals ik dacht dat het hoorde.

Ik heb trouwens ook geprobeerd om
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$('.remain').html('Klaar!!');
te veranderen in
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$('.remain', $this).html('Klaar!!');
Maar dat mocht niet baten.
Gewijzigd op 01/12/2012 13:39:53 door Richard Hansma
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

01/12/2012 14:22:51
Quote Anchor link
Geef eens een vast id aan de verschillende tellers, en dan bijv het aftellen in het rel attribuut.
Dan kan je dit doen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
countdown[$(this).atrr("id")] = setInterval(downCounter($(this), 1000)

En dan een aparte functie maken voor wat je nu binnen de foreach doet.
 
Richard Hansma

Richard Hansma

01/12/2012 14:37:22
Quote Anchor link
Ik ben eerlijk gezegd niet zo thuis in de wereld van javascript en jQuery. Zou ik wat meer informatie kunnen krijgen hoe ik het kan doen? Dit zegt me niet zo veel...
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

01/12/2012 15:47:33
Quote Anchor link
Stel, je maakt in de HTML dit:
<span id="counter1" class="remain" rel="3600">
Dan kan je in JS dit doen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
    });
});

?>

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.
 
Richard Hansma

Richard Hansma

01/12/2012 17:32:21
Quote Anchor link
Dit is al wel een stuk duidelijker, alleen snap ik niet hoe je aan `thespan` komt? Of is het de bedoeling dat ik daar zelf wat invul?
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

01/12/2012 17:58:32
Quote Anchor link
thespan is gewoon een variabele, in dit geval als argument in de functie. Als je een argument binnen een functie hebt moet je daar een naam aan geven, anders kan je dat binnen de functie niet benaderen. In dit geval geef je in de aanroep van de functie de span zelf mee via $(this).
 
Richard Hansma

Richard Hansma

01/12/2012 18:13:11
Quote Anchor link
Dat ik het nog steeds niet voor elkaar heb, geeft mij aan dat ik hier nog niet aan toe ben. Is er misschien een goede tutorial om dit stap voor stap te leren?

Ik wil je overigens enorm bedanken voor alle moeite die je voor me doet.
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

02/12/2012 12:08:14
Quote Anchor link
Geen dank ;-)
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)
PHP script in nieuw venster Selecteer het PHP script
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
<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
 
Richard Hansma

Richard Hansma

02/12/2012 15:32:09
Quote Anchor link
Ik krijg hem nog niet werkende. ik gebruik gewoon het voorbeeld dat je me gaf: <span id="counter1" class="remain" rel="3600"></span>. Is dit voldoende?
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

02/12/2012 16:53:50
Quote Anchor link
Hmz, je hebt gelijk, hiermee werkt het alleen op de laatste timer.
Ik dacht dat ik deze versie had uitgetest, maar schijnbaar vergeten te 'uploaden'. Dit werkt in ieder geval:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
Gewijzigd op 02/12/2012 16:59:01 door Ger van Steenderen
 
Richard Hansma

Richard Hansma

02/12/2012 17:05:12
Quote Anchor link
Werkt tot nu toe naar behoren!
Gewijzigd op 02/12/2012 17:06:12 door Richard Hansma
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

02/12/2012 17:59:20
Quote Anchor link
Mooi, voor mijn gevoel een workaround, maar dat moet dan maar ;-)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.