countdown script
Ik wil mensen tegen elkaar laten strijden b.v.
persoon 1 upload een foto
persoon 2 upload een foto
Ze dagen elkaar uit wie de mooiste foto heeft. Deze uitdaging duurt 72 uur. Daarna is er een winnaar.
Nu zit ik een beetje met de uitdaging. Hoe kan ik ervoor zorgen dat er een soort van script draait en die na 72 automatisch de uitdaging offline gaat gooien? Uiteraard zal je dan een query moeten doen als de tijd verstreken is. Daar kom ik wel uit, alleen vraag ik mij af hoe ik een soort van countdown kan instellen.
Iemand tips?
Deze op de gelijke datum zetten, en klaar.
Gewijzigd op 26/11/2012 15:21:44 door Pong Zor
De timer: zie onderaan (of zoek zelf iets; er zijn er genoeg)
Je maakt een database-tabel 'uitdagingen'
met velden: id, target_time, user1, user2
Dus, je ziet dat de twee gebruikers gelinkt zijn aan dit record.
Ik veronderstel een situatie waarbij 1 gebruiker een uitdaging start; daarna neemt een andere gebruiker de uitdaging aan.
Bij het inserten van dit record (met slechts 1 user gekend) bereken je een target, 72u later.
Dan neemt user2 de uitdaging aan en wordt zijn user_id ingevuld in dit record.
Zolang beide users die zelfde target time hebben, blijft alles voor hen synchroon
Bij elke actie (uploaden, pagina herladen, ...) zoek je contact met de database en kijk je of de target tijd niet overschreden is
---
Een simperl voorbeeld van een countdown:
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
34
35
36
37
38
39
40
41
42
43
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
34
35
36
37
38
39
40
41
42
43
<div id="message"></div>
<script>
// countdown in gang zetten
countdown('2012-11-29 18:25:35'); // deze target datetime staat in de DB, voor beide gebruikers
function countdown(targetTime) {
var result = Object();
var rest;
var timeDiff;
if (typeof(targetTime) == 'number') { // verschil in seconden is gekend
timeDiff = targetTime;
if (timeDiff < 1) {
// eventueel roep je hier nog een "ik ben klaar"- functie aan.
return; // zo wordt de timer gestopt
}
}
else { // verschil in seconden wordt berekend adhv. een dateTime string
var target = new Date(targetTime);
var now = new Date();
var timeDiff = Math.floor((target.getTime() - now.getTime()) / 1000);
}
result.seconds = timeDiff % 60;
rest = timeDiff - result.seconds;
result.minutes = (rest / 60) % (60);
rest = rest - result.minutes * 60;
result.hours = (rest / 3600) % (24);
rest = rest - result.hours * 3600;
result.days = rest / (24*3600);
// en zo kan je nog verder gaan ...
displayTime(result);
setTimeout(function() {
countdown(timeDiff - 1)
}, 1000);
}
function displayTime(timeObject) {
// Uiteraard kan je dit aanpassen naar je noden
document.getElementById('message').innerHTML =
+ timeObject.days + 'd - '
+ timeObject.hours + ':'
+ timeObject.minutes + ':'
+ timeObject.seconds + 'u';
}
</script>
<script>
// countdown in gang zetten
countdown('2012-11-29 18:25:35'); // deze target datetime staat in de DB, voor beide gebruikers
function countdown(targetTime) {
var result = Object();
var rest;
var timeDiff;
if (typeof(targetTime) == 'number') { // verschil in seconden is gekend
timeDiff = targetTime;
if (timeDiff < 1) {
// eventueel roep je hier nog een "ik ben klaar"- functie aan.
return; // zo wordt de timer gestopt
}
}
else { // verschil in seconden wordt berekend adhv. een dateTime string
var target = new Date(targetTime);
var now = new Date();
var timeDiff = Math.floor((target.getTime() - now.getTime()) / 1000);
}
result.seconds = timeDiff % 60;
rest = timeDiff - result.seconds;
result.minutes = (rest / 60) % (60);
rest = rest - result.minutes * 60;
result.hours = (rest / 3600) % (24);
rest = rest - result.hours * 3600;
result.days = rest / (24*3600);
// en zo kan je nog verder gaan ...
displayTime(result);
setTimeout(function() {
countdown(timeDiff - 1)
}, 1000);
}
function displayTime(timeObject) {
// Uiteraard kan je dit aanpassen naar je noden
document.getElementById('message').innerHTML =
+ timeObject.days + 'd - '
+ timeObject.hours + ':'
+ timeObject.minutes + ':'
+ timeObject.seconds + 'u';
}
</script>