使用javascript倒计时和重置计数

Question

我想在我的网站上显示倒计时。适用于所有用户，但我不想使用任何后端语言。 倒计时从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;
}

第二个用于将 milisec 转换为 mins

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

我不想在重新加载时重置倒计时并且循环是无止境的。 我不明白如何处理重置，因为它不是基于任何静态值，它将在 jQuery 和 Javascript 中完成。请帮我解决这个问题或建议我用另一种方式来做。

Answer 1

您只需要使用setInterval method
最复杂的是将你的倒计时设置为 17 分钟，偏移 3 点，第一次从 20 点开始。
...你应该看看modulo works in math

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