Таймер Javascript запускается вперед по истечении срока

Во-первых, я должен извиниться, потому что я не знаком с Javascript. Я нашел JS Fiddle от кого-то другого и как-то адаптировал код. Теперь у меня 3 вопроса.

  1. Как заставить часы продолжать работать после истечения срока их действия? Затем он должен отобразить Выполнено с «0 дней 3 часа 2 минуты 20 секунд». Все, что меня волнует, это то, что время идет. Сам могу адаптировать текст.

  2. Всегда отображайте две цифры. Итак, 02 минуты 01 секунда

  3. Я просто перенес время в промежуток # часы / # дни / # секунды. Как мне взять класс вместо 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/

Большое спасибо!

Вы пытаетесь добраться до элемента по идентификатору countdown, но у вас нет такого элемента в вашем html.

Dekel 19.11.2018 01:28

Спасибо! Я удалил это. надеюсь правильно. document.getElementById (id) .innerHTML = 'EXPIRED!'; следует удалить, потому что он мне не нужен.

Kurz Hantel 19.11.2018 01:32

Когда время истекает, ваша проблема связана с этим document.getElementById(id).innerHTML = 'EXPIRED!';, переменная id, которую вы пытаетесь использовать в селекторе .getElementById(), не определена. Какой элемент вы ожидаете отобразить текст "ИСТЕКШИЙ!"?

NewToJS 19.11.2018 01:42
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
29
1

Ответы 1

Ответы:

  1. Вызовите CountDownTimer() рекурсивно.

Изменять:

clearInterval(timer);
document.getElementById(id).innerHTML = 'EXPIRED!';

К:

clearInterval(timer);
CountDownTimer(...);
  1. Преобразуйте тип Number в строку и при необходимости добавьте начальный ноль:

Изменять:

 var days = Math.floor(distance / _day);

К:

var temp = Math.floor(distance / _day);
var days = (temp.toString().length === 1)? '0' + temp : temp;
  1. В вашем решении нет ничего плохого.

Спасибо. Я попробую сегодня

Kurz Hantel 19.11.2018 13:52

Другие вопросы по теме