jQuery countdown timer converten
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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);
});
});
});
$(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
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
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;
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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);
});
});
});
$(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)
1
if (count-- == 0) {
Code (php)
1
if (secs-- == 0) {
Gewijzigd op 25/11/2012 13:40:58 door Jurgen B
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
countdown = setInterval(function() {
$('.remain', $this).html(hours + ":" + mins + ":" + secs);
if (count-- == 0) {
//do something
clearInterval(countdown);
}
}
$('.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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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);
});
});
$('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
Maar het is me gelukt. Dit is de uiteindelijke code geworden:
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 + ":" + mins + ":" + 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 + ":" + 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
