Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Przekręcanie licznika
Forum PHP.pl > Forum > Przedszkole
boro11
Witam!
Znalazłem w sieci skrypt, który odlicza czas do jakiegoś wydarzenia. Szukałem prostego skryptu i mi się to udało, ale niestety pod dojechaniu do 0 skrypt leci dalej i nie wywołuje się akcja tak jak powinno być.

  1. <script type="text/javascript">
  2. $('#example').countdown({
  3. date: '<?php echo $next_game_time_counter;?>',
  4. day: 'Day',
  5. days: 'Days'
  6. }, function () {
  7. alert('Done!');
  8. });


i plik js

  1. /* CountDown Clock v1.0.0.0 - <a href="https://github.com/e-piksel/countdown" target="_blank">https://github.com/e-piksel/countdown</a> */
  2. (function ($) {
  3. $.fn.countdown = function (options, callback) {
  4. var settings = $.extend({
  5. date: null,
  6. offset: null,
  7. day: 'Day',
  8. days: 'Days',
  9. hour: 'Hour',
  10. hours: 'Hours',
  11. minute: 'Minute',
  12. minutes: 'Minutes',
  13. second: 'Second',
  14. seconds: 'Seconds'
  15. }, options);
  16.  
  17. // Throw error if date is not set
  18. if (!settings.date) {
  19. $.error('Date is not defined.');
  20. }
  21.  
  22. // Throw error if date is set incorectly
  23. if (!Date.parse(settings.date)) {
  24. $.error('Incorrect date format, it should look like this, 12/24/2012 12:00:00.');
  25. }
  26.  
  27. // Save container
  28. var container = this;
  29.  
  30. /**
  31. * Change client's local date to match offset timezone
  32. * @return {Object} Fixed Date object.
  33. */
  34. var currentDate = function () {
  35. // get client's current date
  36. var date = new Date();
  37.  
  38. // turn date to utc
  39. var utc = date.getTime() + (date.getTimezoneOffset() * 60000);
  40.  
  41. // set new Date object
  42. var new_date = new Date(utc + (3600000*settings.offset))
  43.  
  44. return new_date;
  45. };
  46.  
  47. /**
  48. * Main countdown function that calculates everything
  49. */
  50. function countdown () {
  51. var target_date = new Date(settings.date), // set target date
  52. current_date = currentDate(); // get fixed current date
  53.  
  54. // difference of dates
  55. var difference = target_date - current_date;
  56.  
  57. // if difference is negative than it's pass the target date
  58. if (difference < 0) {
  59. // stop timer
  60. clearInterval(interval);
  61.  
  62. if (callback && typeof callback === 'function') callback();
  63.  
  64. return;
  65. }
  66.  
  67. // basic math variables
  68. var _second = 1000,
  69. _minute = _second * 60,
  70. _hour = _minute * 60,
  71. _day = _hour * 24;
  72.  
  73. // calculate dates
  74. var days = Math.floor(difference / _day),
  75. hours = Math.floor((difference % _day) / _hour),
  76. minutes = Math.floor((difference % _hour) / _minute),
  77. seconds = Math.floor((difference % _minute) / _second);
  78.  
  79. // fix dates so that it will show two digets
  80. days = (String(days).length >= 2) ? days : '0' + days;
  81. hours = (String(hours).length >= 2) ? hours : '0' + hours;
  82. minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
  83. seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;
  84.  
  85. // based on the date change the refrence wording
  86. var text_days = (days === 1) ? settings.day : settings.days,
  87. text_hours = (hours === 1) ? settings.hour : settings.hours,
  88. text_minutes = (minutes === 1) ? settings.minute : settings.minutes,
  89. text_seconds = (seconds === 1) ? settings.second : settings.seconds;
  90.  
  91. // set to DOM
  92. container.find('.days').text(days);
  93. container.find('.hours').text(hours);
  94. container.find('.minutes').text(minutes);
  95. container.find('.seconds').text(seconds);
  96.  
  97. container.find('.days_text').text(text_days);
  98. container.find('.hours_text').text(text_hours);
  99. container.find('.minutes_text').text(text_minutes);
  100. container.find('.seconds_text').text(text_seconds);
  101. };
  102.  
  103. // start
  104. var interval = setInterval(countdown, 1000);
  105. };
  106.  
  107. })(jQuery);


Dokumentacji niestety nie ma i nie potrafię sobie z tym problemem poradzić.
com
dodaj warunek sprawdzający i zatrzymaj setInterval funkcja clearInterval
boro11
A czy ten kod nie jest za to odpowiedzialny? A raczej powinien być?

  1. // difference of dates
  2. var difference = target_date - current_date;
  3.  
  4. // if difference is negative than it's pass the target date
  5. if (difference < 0) {
  6. // stop timer
  7. clearInterval(interval);
  8.  
  9. if (callback && typeof callback === 'function') callback();
  10.  
  11. return;
  12. }
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.