Во-первых, я должен извиниться, потому что я не знаком с Javascript. Я нашел JS Fiddle от кого-то другого и как-то адаптировал код. Теперь у меня 3 вопроса.
Как заставить часы продолжать работать после истечения срока их действия? Затем он должен отобразить Выполнено с «0 дней 3 часа 2 минуты 20 секунд». Все, что меня волнует, это то, что время идет. Сам могу адаптировать текст.
Всегда отображайте две цифры. Итак, 02 минуты 01 секунда
Я просто перенес время в промежуток # часы / # дни / # секунды. Как мне взять класс вместо id?
Мой собственный код:
CountDownTimer('12/23/2019 0:00 AM');
function CountDownTimer(date) {
var end = new Date(date);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
/* I Know, that i have no (id), because i have not declared it.
But i dont wanna have a text with "expired".
The timer should count till ✓ Check!
and after reached the date ->
count since: 0 day, 0 hours 10 Minuten 30 Sekunden. */
document.getElementById(id).innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
}
timer = setInterval(showRemaining, 1000);
}#clockdiv{
font-family: sans-serif;
color: #fff;
font-weight: 100;
text-align: center;
margin-top: 50px;
font-size: 30px;
}
#clockdiv > div{
padding: 10px;
border-radius: 3px;
background: #00BF96;
display: inline-block;
}
#clockdiv div > span{
padding: 15px;
border-radius: 3px;
background: #00816A;
display: inline-block;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
} <div id = "clockdiv"><div>
<span id = "days"></span>
<div class = "smalltext">Tage</div>
</div>
<div>
<span id = "hours"></span>
<div class = "smalltext">Stunden</div>
</div>
<div>
<span id = "minutes"></span>
<div class = "smalltext">Minuten</div>
</div>
<div>
<span id = "seconds"></span>
<div class = "smalltext">Sekunden</div>
</div></div>Моя рабочий пример: https://jsfiddle.net/jxdumk39/3/
Большое спасибо!
Спасибо! Я удалил это. надеюсь правильно. document.getElementById (id) .innerHTML = 'EXPIRED!'; следует удалить, потому что он мне не нужен.
Когда время истекает, ваша проблема связана с этим document.getElementById(id).innerHTML = 'EXPIRED!';, переменная id, которую вы пытаетесь использовать в селекторе .getElementById(), не определена. Какой элемент вы ожидаете отобразить текст "ИСТЕКШИЙ!"?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Ответы:
CountDownTimer() рекурсивно.Изменять:
clearInterval(timer);
document.getElementById(id).innerHTML = 'EXPIRED!';
К:
clearInterval(timer);
CountDownTimer(...);
Изменять:
var days = Math.floor(distance / _day);
К:
var temp = Math.floor(distance / _day);
var days = (temp.toString().length === 1)? '0' + temp : temp;
Спасибо. Я попробую сегодня
Вы пытаетесь добраться до элемента по идентификатору
countdown, но у вас нет такого элемента в вашем html.