Как вывести таймер истек вместо этого?

Question

[Андрей]

Добрый день вот кусок кода js таймера

function countdown(dateStr, displayElem, onTimerEnd = null) {
  let targetDate = new Date(dateStr).getTime();
  let displaySymbols = [...displayElem.querySelectorAll('.symbol .cur')]
  let prevValue = '      '
  let timer = setInterval(function() {
    let now = new Date().getTime();
    let remainingTime = targetDate - now;
    if (remainingTime <= 0) {
      clearInterval(timer) // stop timer
      if (onTimerEnd) {
        onTimerEnd() // run callback
      }
    }

    let formattedTimestr = format(remainingTime);
    updateDisplay(formattedTimestr);
  }, 1000);

  function format(time) {
    return [time % 86400000 / 3600000, // hours
        time % 3600000 / 60000, // minutes
        time % 60000 / 1000
      ] // seconds  
      .map(x => Math.floor(x).toString().padStart(2, '0'))
      .join('')
  }

  function updateDisplay(timeString) {
    displaySymbols.forEach((curSymbol, i) => {
      let newValue = timeString[i]
      let currentValue = prevValue[i]
      if (currentValue !== newValue) { // animated change
        let parent = curSymbol.parentNode
        parent.classList.remove('anim')
        curSymbol.textContent = newValue
        curSymbol.nextElementSibling.textContent = currentValue
        var foo = parent.offsetWidth; // reflow hack
        parent.classList.add('anim')
      }
    })
    prevValue = timeString
  }
}

Нужно когда таймер истек, вывести сообщение "Таймер истек "
Вместо этого сейчас на сайте вот такое:

Answer 1

[Сергей delphinpro]

у вас есть коллбэк onTimerEnd. Вот в нем и делайте всё что нужно делать по окончанию таймера.

Comments

[Андрей]

Мои скилы в js не особо, можете подсказать, буду благодарен!

[Сергей delphinpro]

Андрей, третий параметр countdown - функция, которая выполняется по завершению таймера.

countdown(…, …, function(){
  // таймер кончился, делаем что хотим на странице.
})

Как еще объяснить?

[ProjectSoft]

И если данная функция существует, то обязательно выход после её выполнения. Иначе сработает функция updateDisplay и вы опять получите отрицательные значения в таймере.

javascript

function countdown(dateStr, displayElem, onTimerEnd = null) {
  let targetDate = new Date(dateStr).getTime();
  let displaySymbols = [...displayElem.querySelectorAll('.symbol .cur')]
  let prevValue = '      '
  let timer = setInterval(function() {
    let now = new Date().getTime();
    let remainingTime = targetDate - now;
    if (remainingTime <= 0) {
      clearInterval(timer) // stop timer
      if (onTimerEnd) {
        onTimerEnd() // run callback
        /**
         * ОБЯЗАТЕЛЬНО ВЫХОД ИЗ ФУНКЦИИ
        **/
         return !1;
      }
    }

    let formattedTimestr = format(remainingTime);
    updateDisplay(formattedTimestr);
  }, 1000);

  function format(time) {
    return [time % 86400000 / 3600000, // hours
        time % 3600000 / 60000, // minutes
        time % 60000 / 1000
      ] // seconds  
      .map(x => Math.floor(x).toString().padStart(2, '0'))
      .join('')
  }

  function updateDisplay(timeString) {
    displaySymbols.forEach((curSymbol, i) => {
      let newValue = timeString[i]
      let currentValue = prevValue[i]
      if (currentValue !== newValue) { // animated change
        let parent = curSymbol.parentNode
        parent.classList.remove('anim')
        curSymbol.textContent = newValue
        curSymbol.nextElementSibling.textContent = currentValue
        var foo = parent.offsetWidth; // reflow hack
        parent.classList.add('anim')
      }
    })
    prevValue = timeString
  }
}

Запись "Таймер истёк" в табло счётчика вы можете сделать только удалив все дочерние элементы. Количество символов таймера "00:00:00" и записи "Таймер истёк" не равно.

[Андрей]

ProjectSoft, хорошо, можно использовать слово "Доступно"
Помогите с составлением функции.
Или подскажите куда копать

[Андрей]

Сергей delphinpro, наверное не как (
Все равно не понимаю, можете помочь с составлением функции ?

[ProjectSoft]

Андрей,

/* Если не удалять дочерние символы */
countdown("30.06.2022 10:30:00", "#ваш_селектор", function(){
	let displayElem = document.getElementById("ваш_селектор"),
		/* Поправить под свои селекторы */
		displaySymbols = [...displayElem.querySelectorAll('.symbol > *')];
	const str = "Истекло",
		len = str.length - 1;
	displaySymbols.forEach((curSymbol, i) => {
		i <= len && curSymbol.textContent = str[i];
	});
});