login  Naam:   Wachtwoord: 
Registreer je!
 Forum

JavaScript afteller (m.b.v. MySQL database)

Offline PHMJ20 - 26/10/2008 15:19 (laatste wijziging 26/10/2008 15:20)
Avatar van PHMJ20Nieuw lid Hallo iedereen,
ik heb al gezocht naar een afteller die aan mijn eisen voldoet, maar helaas niets gevonden...
Dit zijn mijn eisen:
-Een afteller in het volgend formaat -> uren:minuten:seconden
-Wanneer de teller volledig afgeteld is, de huidige pagina vernieuwen.
-Uit de database een timestamp halen, de timestamp omrekenen in resterende tijd en zo in de teller weergeven.
Ik ben nl. nog niet zo goed in JavaScript...
Alvast bedankt!

Mvg, PHMJ20.

4 antwoorden

Gesponsorde links
Offline Rik - 26/10/2008 15:43
Avatar van Rik Gouden medailleGouden medaille

Crew algemeen		 Probeer het in stappen op te lossen:
- Query maken die de tijd in seconden uit de database haalt.
- Tijd in seconden in de javascript aftel code zetten.
- Stukje javascript maken dat bij 0 de pagina refreshed.

Als je wilt dat iemand anders het voor je doet moet je posten op samenwerken.
Offline djb - 26/10/2008 20:48
Avatar van djb PHP beginner Heey ik heb wat gemaakt 

dat zal je vast wel op weg helpen.
Dit is de javascript:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var begin_seconden = 12; // Aantal seconden
  2. var aantal_seconden = 0; // zo laten :)
  3. var animatie_punt = 1; // dubbele punt knipperen. 0 = uit, 1 aan.
  4. function aftellen() {
  5. 	aantal_seconden++;
  6. 	if (aantal_seconden!=begin_seconden) {
  7. 		var aantal_seconden_nog = begin_seconden-aantal_seconden;
  8. 		var uur = Math.floor(aantal_seconden_nog/3600);
  9. 		var minuut = Math.floor((aantal_seconden_nog-(3600*uur))/60);
  10. 		var seconden = Math.floor((aantal_seconden_nog-(3600*uur)-(60*minuut)));
  11. 		if (uur<=9) {
  12. 			uur = '0'+uur;
  13. 		}
  14. 		if (minuut<=9) {
  15. 			minuut = '0'+minuut;
  16. 		}
  17. 		if (seconden<=9) {
  18. 			seconden = '0'+seconden;
  19. 		}
  20. 		if (animatie_punt==0) {
  21. 			var dubbele_punt = ':';
  22. 		} else {
  23. 			if (animatie_punt==1) {
  24. 				var dubbele_punt = ':';
  25. 				animatie_punt = 2;
  26. 			} else {
  27. 				var dubbele_punt = ' ';
  28. 				animatie_punt = 1;
  29. 			}
  30. 		}
  31. 		document.tijd.tijd_input.value = uur+dubbele_punt+minuut+dubbele_punt+seconden;
  32. 	} else {
  33. 		window.top.location.href = window.top.location.href;
  34. 	}
  35. }
  36. window.setInterval('aftellen();',1000);

en je moet ook ergens een input veldje hebben.
Dus zoiets:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <form name="tijd">
  2. <input type="text" name="tijd_input">
  3. </form>


Ik verveelde me een beetje dus heb ook die dubbele punt laten knipperen net of het een beetje echt is 
var begin_seconden = 12; is het aantal seconden, deze moet je uit de database halen.
Als je iets meer info je database geeft kunne we je daarmee ook helpen 
Offline henver - 26/10/2008 20:49 (laatste wijziging 26/10/2008 21:12)
Avatar van henver HTML gevorderde @djb: Zo gaat ie telkens de pagina vernieuwd wordt, opnieuw beginnen aftellen, en dat is volgens mij niet de bedoeling.

Edit: Het gaat wel werken als eerst het verschil wordt berekend tussen de huidige tijd en de tijd dat de teller moet stoppen met tellen.

Edit: heb het even afgemaakt en het volgende zou moeten werken.
Wel even $eindtijd aanpassen aan de variabele uit de database.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2.  <head>
  3.   <title>Teller</title>
  4. <?
  5. $tijd = time(); // Huidige tijd (in timestamp)
  6. $eindtijd = 1225051860; // Eindtijd uit de database ( in timestamp)
  7. $tijdverschil = $eindtijd - $tijd; // Tijdverschil
  8. if($tijdverschil > 0){
  9. ?>
  10.   <script type="text/javascript">
  11.  
  12. var begin_seconden = <? echo $tijdverschil ?>; // Aantal seconden
  13. var aantal_seconden = 0; // zo laten :)
  14. var animatie_punt = 1; // dubbele punt knipperen. 0 = uit, 1 aan.
  15. function aftellen() {
  16.     aantal_seconden++;
  17.     if (aantal_seconden!=begin_seconden) {
  18.         var aantal_seconden_nog = begin_seconden-aantal_seconden;
  19.         var uur = Math.floor(aantal_seconden_nog/3600);
  20.         var minuut = Math.floor((aantal_seconden_nog-(3600*uur))/60);
  21.         var seconden = Math.floor((aantal_seconden_nog-(3600*uur)-(60*minuut)));
  22.         if (uur<=9) {
  23.             uur = '0'+uur;
  24.         }
  25.         if (minuut<=9) {
  26.             minuut = '0'+minuut;
  27.         }
  28.         if (seconden<=9) {
  29.             seconden = '0'+seconden;
  30.         }
  31.         if (animatie_punt==0) {
  32.             var dubbele_punt = ':';
  33.         } else {
  34.             if (animatie_punt==1) {
  35.                 var dubbele_punt = ':';
  36.                 animatie_punt = 2;
  37.             } else {
  38.                 var dubbele_punt = ' ';
  39.                 animatie_punt = 1;
  40.             }
  41.         }
  42.         document.tijd.tijd_input.value = uur+dubbele_punt+minuut+dubbele_punt+seconden;
  43.     } else {
  44.         window.top.location.href = window.top.location.href;
  45.     }
  46. }
  47. window.setInterval('aftellen();',1000);
  48.   </script>
  49. <?
  50. }
  51. ?>
  52.  </head>
  53.  <body>
  54.  
  55. <?
  56. if($tijdverschil > 0){
  57. ?>
  58.  
  59. <form name="tijd">
  60. <input type="text" name="tijd_input">
  61. </form>
  62.  
  63. <?
  64. }else{
  65. ?>
  66.  
  67. De inhoud van je pagina als er geen teller is.
  68.  
  69. <?
  70. }
  71. ?>
  72.  
  73.  </body>
  74. </html>
Offline djb - 26/10/2008 21:20
Avatar van djb PHP beginner Heey henver ik ga ook een voorbeeldje he 
En idd hij telde gewoon door 

Maar wou hem opweg helpen 
Hoe jij het gedaan hebt is idd super goed  
Je hebt er gewoon nog een stapje bovenop gedaan  

Maar kon je niet beter
if($tijdverschil > 0){
.....
} else {
.....
}
doen?
Maakt eigenlijk weinig uit maarja 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.197s