Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Timer w JS
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
lord2105
24.04.2010, 10:12:50
Witam serdecznie chciałbym prosić o pomoc w dość prostym kodzie JS, a mianowicie chodzi o to, by do poniższego kodu zmienne seconds,minutes,hours przyjmowały wartości z argumentów funkcji lecz próbowałem już na wiele sposobów i nic. 

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Timer</title>
  4. <script type="text/javascript">
  5.     var seconds = 0;
  6. 	var minutes = 0;
  7. 	var hours = 0;
  8. function zeroPad(time) {
  9.    var numZeropad = time + '';
  10.    while(numZeropad.length < 2) {
  11.       numZeropad = "0" + numZeropad;
  12.       }
  13.    return numZeropad;
  14.    }
  15.  
  16.    function countSecs(gdzie) {
  17.  
  18.        seconds++;
  19.  
  20.       if (seconds > 59) {
  21.            minutes++;
  22.            seconds = 0;
  23.            }
  24. 	if (minutes > 59) {
  25.            hours++;
  26.            minutes = 0;
  27.            seconds = 0;
  28.            }
  29.       document.getElementById(gdzie).innerHTML = "Time " + zeroPad(hours) + ":" + zeroPad(minutes) + ":<span style='color:red;font-size:12px;'>" + zeroPad(seconds) + "</span>";
  30.       }
  31.  
  32. function startTimer(a) {
  33.      action = window.setInterval("countSecs('"+a+"');",1000);
  34. }
  35.  
  36. </script>
  37. </head>
  38. <body onload="startTimer('timeBox');">
  39. <div id="timeBox">Time 00:00:00</div>
  40.  
  41. </body>
  42. </html>
[HTML] pobierz, plaintext


Próbowałem w ten sposób, głownie chodzi mi o to by ten skrypt liczył czas od podanych wartości wczytanych w pętli while z mysql i wyświelał dla każdego rekordu czas w <td id='tutaj'></td>

Czułbym się niezmiernie usatysfakcjonowany jeżeli znalazłby się ktoś kto podpowie mi dlaczego timer wykonuje 1 interval i staje w miejscu ?

o to jak próbowałem:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Timer</title>
  4. <script type="text/javascript">
  5. function zeroPad(time) {
  6.    var numZeropad = time + '';
  7.    while(numZeropad.length < 2) {
  8.       numZeropad = "0" + numZeropad;
  9.       }
  10.    return numZeropad;
  11.    }
  12.  
  13.    function countSecs(gdzie,hours,minutes,seconds) {
  14.  
  15.        seconds++;
  16.  
  17.       if (seconds > 59) {
  18.            minutes++;
  19.            seconds = 0;
  20.            }
  21. 	if (minutes > 59) {
  22.            hours++;
  23.            minutes = 0;
  24.            seconds = 0;
  25.            }
  26.       document.getElementById(gdzie).innerHTML = "Time " + zeroPad(hours) + ":" + zeroPad(minutes) + ":<span style='color:red;font-size:12px;'>" + zeroPad(seconds) + "</span>";
  27.       }
  28.  
  29. function startTimer(a,h,m,s) {
  30.      action = window.setInterval("countSecs('"+a+"','"+h+"','"+m+"','"+s+"');",1000);
  31. }
  32.  
  33. </script>
  34. </head>
  35. <body onload="startTimer('timeBox','0','0','0');">
  36. <div id="timeBox">Time 00:00:00</div>
  37.  
  38. </body>
  39. </html>
[HTML] pobierz, plaintext
lord_t
26.04.2010, 17:53:14
Poczytaj czym się różni setTimeout od setInterval.
zegarek84
26.04.2010, 21:57:58
Cytat(lord_t @ 26.04.2010, 18:53:14 ) *
Poczytaj czym się różni setTimeout od setInterval.
on nie zastosował setTimeout winksmiley.jpg - za szybko spojrzałeś winksmiley.jpg ...
Cytat(lord2105 @ 24.04.2010, 11:12:50 ) *
Czułbym się niezmiernie usatysfakcjonowany jeżeli znalazłby się ktoś kto podpowie mi dlaczego timer wykonuje 1 interval i staje w miejscu ?
nie staje w miejscu, wykonuje się calutki czas winksmiley.jpg - jednak za każdym razem do funkcji przekazujesz te same parametry wejściowe winksmiley.jpg...

na to co chciałeś na biegiem Ci to przerobiłem... poczytaj o zasięgu zmiennych... i staraj się nie używać "tekstu" w funkcjach setTimeout oraz setInterval... oczywiście da się jeszcze inaczej przekazać parametry jednak IE by tego nie obsłużyło... ale poczytaj o zasięgu zmiennych i luknij jak na szybko Ci to zamieniłem (mam tu sporo zastrzeżeń ale małymi kroczkami - nie będę wytykał wszystkich niedociągnięć tutaj ;p)
[HTML] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <title>Timer</title>
  4.         <script type="text/javascript">
  5.             var action, gdzie, hours, minutes, seconds;
  6.             function zeroPad(time) {
  7.                 var numZeropad = time + '';
  8.                 while(numZeropad.length < 2) {
  9.                     numZeropad = "0" + numZeropad;
  10.                 }
  11.                 return numZeropad;
  12.             }
  13.  
  14.             function countSecs() {
  15.  
  16.                 seconds++;
  17.  
  18.                 if (seconds > 59) {
  19.                     minutes++;
  20.                     seconds = 0;
  21.                 }
  22.                 if (minutes > 59) {
  23.                     hours++;
  24.                     minutes = 0;
  25.                     seconds = 0;
  26.                 }
  27.                 gdzie.innerHTML = "Time " + zeroPad(hours) + ":" + zeroPad(minutes) + ":<span style='color:red;font-size:12px;'>" + zeroPad(seconds) + "</span>";
  28.             }
  29.  
  30.             function startTimer(a,h,m,s) {
  31.                 gdzie = document.getElementById(a),
  32.                 hours = h,
  33.                 minutes = m,
  34.                 seconds = s,
  35.                 action = window.setInterval(countSecs,1000);
  36.             }
  37.  
  38.         </script>
  39.     </head>
  40.     <body onload="startTimer('timeBox','0','0','0');">
  41.         <div id="timeBox">Time 00:00:00</div>
  42.     </body>
  43. </html>
[HTML] pobierz, plaintext

lord2105
1.05.2010, 13:31:31
rozumiem teraz dlaczego tak a nie inaczej, bo każda zmienna podniesiona o 1 jest wczytawana na nowo do funkcji i podnoszona po raz kolejny: ) ale jest jeszcze jedno w jaki sposób zuniwersializować ten licznik aby mogl liczyć czas dla kilku różnych divów z innymi podanymi argumentami funkcji startTimer?

[HTML] pobierz, plaintext 
  1. <html>
  2. 	<head>
  3. 		<title>Timer</title>
  4. 		<script type="text/javascript">
  5. 			var action, gdzie, hours, minutes, seconds;
  6. 			function zeroPad(time) {
  7. 				var numZeropad = time + '';
  8. 				while(numZeropad.length < 2) {
  9. 					numZeropad = "0" + numZeropad;
  10. 				}
  11. 				return numZeropad;
  12. 			}
  13.  
  14. 			function countSecs() {
  15.  
  16. 				seconds++;
  17.  
  18. 				if (seconds > 59) {
  19. 					minutes++;
  20. 					seconds = 0;
  21. 				}
  22. 				if (minutes > 59) {
  23. 					hours++;
  24. 					minutes = 0;
  25. 					seconds = 0;
  26. 				}
  27. 				gdzie.innerHTML = "Time " + zeroPad(hours) + ":" + zeroPad(minutes) + ":<span style='color:red;font-size:12px;'>" + zeroPad(seconds) + "</span>";
  28. 			}
  29.  
  30. 			function startTimer(a,h,m,s) {
  31. 				gdzie = document.getElementById(a),
  32. 				hours = h,
  33. 				minutes = m,
  34. 				seconds = s,
  35. 				action = window.setInterval(countSecs,1000);
  36. 			}
  37.  
  38. 		</script>
  39. 	</head>
  40. 	<body onload="">
  41. 		<div id="timeBox">Time 00:00:00</div><div><button onclick="startTimer('timeBox','0','20','0');">Start 1</button></div>
  42. 		<div id="timeBox2">Time 00:00:00</div><div><button onclick="startTimer('timeBox2','1','30','0');">Start 2</button></div>
  43. 	</body>
  44. </html>
[HTML] pobierz, plaintext
zegarek84
1.05.2010, 16:25:54
dodatkowe zabezpieczenia sobie sam porób [czy już kliknięty itd.] - masz pół gotowca - tzn. liczników możesz porobić ile chcesz teraz... zmień sobie logikę działania a na koniec luknij na to pytanie na forum:
http://forum.php.pl/index.php?s=&showt...st&p=741983
[HTML] pobierz, plaintext 
  1. <html>
  2. 	<head>
  3. 		<title>Timer</title>
  4. 		<script type="text/javascript">
  5. function zeroPad(time) {
  6. 	var numZeropad = time + '';
  7. 	while(numZeropad.length < 2) {
  8. 		numZeropad = "0" + numZeropad;
  9. 	}
  10. 	return numZeropad;
  11. }
  12.  
  13. var timer = function(gdzie, hours, minutes, seconds){
  14. 	var privZeroPad = zeroPad;
  15. 	this.countSecs = function(){
  16. 		seconds++;
  17. 		if (seconds > 59) {
  18. 			minutes++;
  19. 			seconds = 0;
  20. 		}
  21. 		if (minutes > 59) {
  22. 			hours++;
  23. 			minutes = 0;
  24. 			seconds = 0;
  25. 		}
  26. 		gdzie.innerHTML = "Time " + privZeroPad(hours) + ":" + privZeroPad(minutes) + ":<span style='color:red;font-size:12px;'>" + privZeroPad(seconds) + "</span>";
  27. 	}
  28. };
  29.  
  30. function startTimer(a,h,m,s) {
  31. 	var object = new timer (document.getElementById(a), h, m, s);
  32. 	setInterval(object.countSecs,1000);
  33. }
  34. 		</script>
  35. 	</head>
  36. 	<body onload="">
  37. 		<div id="timeBox">Time 00:00:00</div><div><button onclick="startTimer('timeBox','0','20','0');">Start 1</button></div>
  38. 		<div id="timeBox2">Time 00:00:00</div><div><button onclick="startTimer('timeBox2','1','30','0');">Start 2</button></div>
  39. 	</body>
  40. </html>
[HTML] pobierz, plaintext

masz ogólną ideę działania - reszta należy do Ciebie winksmiley.jpg

poza tym taki timer nie jest idealny - co każdy interwał powinno się korzystać z obiektu Date() gdyż już po kilku minutach inaczej możesz zauważyć rozbieżność choćby w sekundach...
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.