Блог

Я хочу показать обратный отсчет на своем веб-сайте. для всех пользователей, но я не хочу использовать какой-либо внутренний язык. Обратный отсчет начинается с 20 и после каждого 1min , на которое я уменьшаю число 1 . Означает, что после 2mins того, как значение будет 18 и когда оно достигнет 3 значения, число должно быть сброшено 20 . Я использую разницу во времени, чтобы сделать это правильно, но сброс не работает. У меня есть две функции

 function change_html() {
  var start_number = 20;
  var start = new Date("November 11, 2020 00:00:00"); // This will get the all milisec
  var end = new Date(); // This will get the all milisec of current
  var final = (get_difference(start,end)); // This will return all the mins passed
  var new_start = (final/20); // This will get how many 20 are passed
  var new_final = new_start.toString();
  new_final = new_final.split(".");
  var final_to_show = new_start-parseInt(new_final[0]);
  final_to_show = final_to_show*20; // This will get how many numbers are remain to complete 20
  final_to_show = Math.round(((20)-final_to_show));
  document.getElementById('html_element').innerHTML = final_to_show;
}
  

И второй для преобразования миллисекунд в минуты

 function get_difference(start,end) {
  var difference =((end.getTime() - start.getTime()) / 1000)/60;
  return Math.abs(Math.round(difference));
}
  

Я не хотел сбрасывать обратный отсчет при перезагрузке, и цикл бесконечен.
Я не понимаю, что делать с сбросом, потому что он не основан на каком-либо статическом значении, это будет сделано в jQuery и Javascript. Пожалуйста, помогите мне с этим или предложите мне сделать это другим способом.

Вам просто нужно использовать метод setInterval
самым сложным было установить обратный отсчет на 17 минут со смещением в 3 пункта, с первым запуском в 20.
… и вы должны посмотреть, как работает модуль в математике

 const showElement = document.getElementById('html_element')
    , one_Sec     = 1000
    , one_Min     = one_Sec * 60
    , countMax    = 20
    , countMin    = 3
    , countRange  = countMax - countMin  1
    , startDateT  = (new Date("November 11, 2020 00:00:00")).getTime()
    , timeNowDiff = () => Math.floor(Math.abs(((new Date()).getTime() -startDateT) / one_Min ))
    ;
showElement.textContent =  countMax -(timeNowDiff() % countRange)
setInterval(()=>
  {
  showElement.textContent = countMax -(timeNowDiff() % countRange)
  }
  , one_Sec *10); //  check display change every 10 seconds....  

 changing every minutes : <span id="html_element" style="color:red"></span> until 3