jQuery countdown timer converten

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Richard Hansma

Richard Hansma

17/11/2012 21:46:08
Quote Anchor link
Beste PHP-ers,

Ik heb een vraag over jQuery. Ik heb een stukje code waarmee ik vanaf een zelf bepaald punt kan terugtellen, alleen gaat dat in seconden. Nu wil ik graag dat dat gebeurt in uren, minuten en seconden. Is dit makkelijk op te lossen met deze code, of moet ik dan iets heel anders zoeken?

Hier de code waar het om gaat:

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
$(window).load(function(){
    $(document).ready(function(){  
  $('tr[id]').each(function () {
     var $this = $(this);
     var count = parseInt($this.attr("id"));
     countdown = setInterval(function(){
         $('.remain', $this).html(count + " seconds remaining!");
         if (count-- == 0) {
           //do something
           clearInterval(countdown);
         }
     }, 1000);
  });  
});
});


Bij voorbaat dank,

Richard Hansma
 
PHP hulp

PHP hulp

30/01/2025 23:19:14
 
Richard Hansma

Richard Hansma

19/11/2012 20:34:20
Quote Anchor link
Niemand die me kan helpen toevallig?
 
Richard Hansma

Richard Hansma

24/11/2012 20:25:54
Quote Anchor link
Ik heb nog steeds geen oplossing kunnen vinden voor mijn probleem. Is er iemand die me kan helpen met een zetje in de goede richting hoe ik dit kan doen (met deze code)?
 
Jurgen B

Jurgen B

25/11/2012 00:43:39
Quote Anchor link
Als je het aantal seconden hebt kan je de rest toch uitrekenen?

uren = secondenTimer / 3600 (naar beneden afronden)
(dagen = uren / 24 (naar beneden afronden))
minuten = (secondenTimer - (uren * 3600)) / 60 (naar beneden afronden)
seconden = secondenTimer - (uren * 3600) - (minuten * 60)
Gewijzigd op 25/11/2012 00:45:11 door Jurgen B
 
Frits Katoen

Frits Katoen

25/11/2012 11:34:48
Quote Anchor link
Of onafhankelijk van vorige uitkomsten:

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

Richard Hansma

25/11/2012 13:34:56
Quote Anchor link
Hartelijk bedankt voor het reageren.

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
$(window).load(function(){
$(document).ready(function() {
  $('tr[id]').each(function() {
     var $this = $(this);
     var count = parseInt($this.attr("id"));
     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;
     countdown = setInterval(function() {
            $('.remain', $this).html(hours + ":" + mins + ":" + secs);
            if (count-- == 0) {
                //do something
                clearInterval(countdown);
            }
        }, 1000);
    });
});
});

Het staat nu zoals ik wil, alleen loopt de teller niet. Als ik
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
if (count-- == 0) {
verander in
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
if (secs-- == 0) {
gebeurd dat wel, alleen krijg je dan min getallen... Wat kan ik hier aan doen?
 
Jurgen B

Jurgen B

25/11/2012 13:40:36
Quote Anchor link
Je conversie van countdown naar hh:mm:ss moet elke seconde gebeuren, dus elke interval. Met andere woorden moet je code binnen de interval uitgevoerd worden.
Gewijzigd op 25/11/2012 13:40:58 door Jurgen B
 
Richard Hansma

Richard Hansma

25/11/2012 15:58:27
Quote Anchor link
Eh, als ik `secs` doe i.p.v `count` werkt het wel, totdat de seconde op 0 komt, Dan gaat hij verder met min getallen. Ik snap niet precies wat je bedoelt met `binnen de interval`?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
countdown = setInterval(function() {
            $('.remain', $this).html(hours + ":" + mins + ":" + secs);
            if (count-- == 0) {
                //do something
                clearInterval(countdown);
            }
        }

Zoals ik het begrijp, staat dit allemaal in de interval, aangezien je hem `set` en daarna `clear` je hem. Ik ben geen kei in JS, maar dat is wel te zien.
Gewijzigd op 25/11/2012 15:59:44 door Richard Hansma
 
Frits Katoen

Frits Katoen

25/11/2012 16:00:56
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
$(document).ready(function() {
  $('tr[id]').each(function() {
     countdown = setInterval(function() {
    // de berekening dus binnen de setInterval functie
    var $this = $(this);
         var count = parseInt($this.attr("id"));
         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 + ":" + mins + ":" + secs);
            if (count-- == 0) {
                //do something
                clearInterval(countdown);
            }
        }, 1000);
    });
});


Toevoeging op 25/11/2012 16:06:59:

Je gebruikt trouwens óf $(document).ready() óf $(window).load()

De eerste gebruik je als je iets wilt doen als de volledige DOM geladen is, de tweede als je wilt dat naast de DOM ook alle overige content (zoals bijvoorbeeld plaatjes) geladen zijn voordat je iets uitvoert.
Gewijzigd op 25/11/2012 16:09:13 door Frits Katoen
 
Richard Hansma

Richard Hansma

25/11/2012 16:12:36
Quote Anchor link
@Frits jouw code werkt niet bij mij. Ik krijg dan helemaal geen countdown te zien.


Maar het is me gelukt. Dit is de uiteindelijke code geworden:

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 + ":" + mins + ":" + secs);
            if (count-- == 0) {
                //do something
                clearInterval(countdown);
            }
        }, 1000);
    });
});


Iedereen heel erg bedankt voor de moeite.
Gewijzigd op 25/11/2012 16:14:00 door Richard Hansma
 
Joey Drieling

Joey Drieling

25/11/2012 21:30:02
Quote Anchor link
Mensen vergeet niet dat JS standaard ook een Date Object heeft, wat datum of tijd makkelijk kan uitrekenen en weergeven in tekst.
 



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.