Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Skrypt odliczający nie zmienia minut
Forum PHP.pl > Forum > Przedszkole
thomson89
5.12.2010, 18:09:45
Witam!

Znalazłem gdzieś kod odliczający czas. Niestety nie działa on poprawnie. Jeżeli powiedzmy zostało 00:02:01, to minuty się nie zmienią od razy, tylko będzie nadal 00:02:59 i dopiero gdy będzie 00:02:30 to zegar zmieni się na 00:01:29 - czyli tak jak powinno być. Jeżeli nie wiecie o co chodzi to skopiujcie sobie to poniżej i zaobserwujcie gdy jest właśnie xx:xx:01

Proszę o pomoc, jak to naprawić!

Pozdrawiam, Mateusz!

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="pl">
  4.   <meta charset="utf-8">
  5.   <title>Jak zrobic odliczanie czasu w JS i trigger ? (4 programmers.net)</title>
  6.   <style>
  7.   </style>
  8. </head>
  9. <body>
  10.     <h1>Odliczanie czasu</h1>
  11.     <p>Licznik pierwszy: <strong id="counter1"></strong></p>
  12.     <p>Licznik drugi: <strong id="counter2"></strong></p>
  13.     <p>Licznik trzeci: <strong id="counter3"></strong></p>
  14.     <p>Licznik czwarty &ndash; Odliczanie do alerta: <strong id="counter_alert"></strong></p>
  15.   <script>
  16.  
  17. /**
  18.  * Wyświetla zegar odliczający godziny, minuty i sekundy od daty (chwili)
  19.  * bieżącej do daty docelowej.
  20.  *
  21.  * Po osiągnięciu daty docelowej zegar pokazuje zero.
  22.  *
  23.  * @param targetDate        {Date}        Data docelowa, reprezentująca chwilę czasu "0"
  24.  * @param displayElement    {HTMLElement} Element, w którym będzie wyświetlane odliczanie
  25.  * @param onCountdownFinish {function}    (Parametr opcjonalny) Funkcja, która zostanie
  26.  *                                        wywołana gdy odliczanie się skończy. Jeśli
  27.  *                                        jako data docelowa będzie podana chwila z przeszłości,
  28.  *                                        to funkcja ta będzie wywołana od razu.
  29.  *
  30.  */
  31. function countdown(targetDate, displayElement, onCountdownFinish /* = null*/) {
  32.   if (!(targetDate && displayElement)) {
  33.     return;
  34.   }
  35.   var formatTimeInterval = function(seconds) {
  36.     var hrs = Math.round(seconds / 3600)
  37.     var min = Math.round(seconds / 60) % 60;
  38.     var sec = seconds % 60;
  39.     return (hrs + ':' + min + ':' + sec).replace(/(^|:)(\d)(?=:|$)/g, '$10$2');
  40.   };
  41.   var refreshTimer = function() {
  42.     var now = new Date();
  43.     var diffMilliseconds = targetDate.getTime()  - now.getTime();
  44.     var diffSeconds = Math.round(diffMilliseconds / 1000);
  45.     if (diffSeconds < 0) {
  46.       diffSeconds = 0;
  47.     }
  48.     var countdownHTML = formatTimeInterval(diffSeconds)
  49.     if (countdownHTML != displayElement.innerHTML) {
  50.       displayElement.innerHTML = countdownHTML;
  51.     }
  52.     if (diffSeconds === 0) {
  53.       clearInterval(intervalId);
  54.       if (typeof onCountdownFinish === 'function') {
  55.         onCountdownFinish(targetDate);
  56.       }
  57.     }
  58.   };
  59.   var intervalId = setInterval(refreshTimer, 10);
  60.   refreshTimer();
  61. }
  62.  
  63. // Właściwa inicjalizacja zegarów:
  64. (function() {
  65.   var now = new Date();
  66.  
  67.   // data docelowa: 3 marca 2010, godz. 20:48:10 (miesiące liczymy od zera, a dni od jeden... lol)
  68.   countdown(new Date(2010, 11, 5, 18, 0, 0, 0), document.getElementById('counter1'));
  69.  
  70.   // data docelowa: teraz plus 2 h 12 min 41 sek
  71.   countdown(new Date(now.getTime() + (2 * 3600 + 12 * 60 + 41) * 1000), document.getElementById('counter2'));
  72.  
  73.   // data docelowa: teraz plus 1 min 3 sek
  74.   countdown(new Date(now.getTime() + (1 * 60 + 3) * 1000), document.getElementById('counter3'));
  75.  
  76.   // data docelowa: teraz + 5 sek
  77.   countdown(new Date(now.getTime() + 10 * 1000),
  78.             document.getElementById('counter_alert'),
  79.             function() {
  80.               alert('Licznik czwarty: czas minął!');
  81.             }
  82.   );
  83. })();
  84.  
  85. // Więcej o tworzeniu dat:
  86. // <a href="http://www.w3schools.com/jsref/jsref_obj_date.asp" target="_blank">http://www.w3schools.com/jsref/jsref_obj_date.asp</a>
  87. // Zauważ, że można przekazać konstruktorowi Date czas w milisekundach,
  88. // co bardzo łatwo przerobić na unixowy czas podawany w sekundach.
  89.   </script>
  90. </body>
  91. </html>
[HTML] pobierz, plaintext
blade-mrn
6.12.2010, 11:22:07
Powiem szczerze że nie chciało mi się analizować twojego kodu ale jeśli chodzi ci o odliczanie czasu to ja kiedyś zrobiłem to tak:
[JAVASCRIPT] pobierz, plaintext 
  1. <script type="text/javascript">
  2. <!--
  3.         var c; //zmienna przechowująca wartość początkową czasu 
  4. 	var t;
  5. 	var timer_is_on=0;
  6. 	function timedCount()
  7. 		{
  8. 			if (c>0)
  9. 				{	
  10. 					godz = Math.floor(c/60/60);
  11. 					if (godz < 10)	{godz = "0"+godz}
  12. 					min = Math.floor(c/60)-godz*60;
  13. 					if (min < 10) {min = "0"+min;}
  14. 					sek = c % 60;
  15. 					if (sek < 10)	{sek = "0"+sek;}
  16. 					document.getElementById('txt').innerHTML=godz+" h "+min+" min "+sek+" sek";
  17. 					c=c-1;
  18. 					t=setTimeout("timedCount()",1000);
  19. 				}
  20. 			if (c==0) 
  21. 				{
  22. 					document.getElementById('txt').innerHTML="czas upłynął";                                
  23. 				}
  24. 		}
  25. //-->
  26. </script>
[JAVASCRIPT] pobierz, plaintext

Może to cię naprowadzi na rozwiązanie.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.