countdown.php 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <?php
  2. $this->registerJs(
  3. <<<JS
  4. const deadline = new Date(2023, 9, 12);
  5. // id таймера
  6. let timerId = null;
  7. // склонение числительных
  8. function declensionNum(num, words) {
  9. return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]];
  10. }
  11. // вычисляем разницу дат и устанавливаем оставшееся времени в качестве содержимого элементов
  12. function countdownTimer() {
  13. const diff = deadline - new Date();
  14. if (diff <= 0) {
  15. clearInterval(timerId);
  16. }
  17. const days = diff > 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0;
  18. const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0;
  19. const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0;
  20. const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0;
  21. _days.dataset.title = declensionNum(days, ['день', 'дня', 'дней']);
  22. _hours.dataset.title = declensionNum(hours, ['час', 'часа', 'часов']);
  23. _minutes.dataset.title = declensionNum(minutes, ['минута', 'минуты', 'минут']);
  24. // _seconds.dataset.title = declensionNum(seconds, ['секунда', 'секунды', 'секунд']);
  25. _days.textContent = days + ' ' + _days.dataset.title;
  26. _hours.textContent = hours + ' ' + _hours.dataset.title;
  27. _minutes.textContent = minutes + ' ' + _minutes.dataset.title;
  28. // _seconds.textContent = seconds < 10 ? '0' + seconds : seconds;
  29. // _seconds.textContent = _seconds.textContent + ' ' + _seconds.dataset.title;
  30. }
  31. // получаем элементы, содержащие компоненты даты
  32. const _days = document.querySelector('.timer__days');
  33. const _hours = document.querySelector('.timer__hours');
  34. const _minutes = document.querySelector('.timer__minutes');
  35. const _seconds = document.querySelector('.timer__seconds');
  36. // вызываем функцию countdownTimer
  37. countdownTimer();
  38. // вызываем функцию countdownTimer каждую секунду
  39. timerId = setInterval(countdownTimer, 1000);
  40. JS
  41. ,
  42. yii\web\View::POS_END,
  43. 'counter'
  44. );