jQuery 计时器，当分钟更改时刷新 div 元素

Question

我正在尝试让一个div元素在一分钟过去后更新。我在 Javascript 中有一个函数，可以倒计时到一天中的特定时间，但是，我想使用 JQuery，这样当分钟变化时计时器正在倒计时，而不必刷新浏览器，它无需刷新即可完成。

我有一个计时器，它使用 setTimout 倒计时显示小时、分钟、秒倒计时到特定setHours()。

function countdown() {
  var now = new Date();
  var eventDate = new Date();
  var currentTiime = now.getTime();
  var eventTime = eventDate.setHours(16, 30, 0);
  var remTime = eventTime - currentTiime;
  var s = Math.floor(remTime / 1000);
  var m = Math.floor(s / 60);
  var h = Math.floor(m / 60);

  h %= 24;
  m %= 60;
  s %= 60;

  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;
  s = (s < 10) ? "0" + s : s;

  document.getElementById("hours").textContent = h;
  document.getElementById("minutes").textContent = m;
  document.getElementById("seconds").textContent = s;
  if (now.getHours() >= 9 && currentTiime < eventTime) {
    setTimeout(countdown, 1000);
  }

目前我有一个倒计时到 16：30 的倒计时，但显示为：小时：分钟：秒：我想Hours:xx minutes:xx，当分钟下降 1 分钟时，它会显示在div 中而不刷新页面。

Answer 1

这是一个包含一些 JQuery 的解决方案。请注意，您的Javascript解决方案也可以工作。唯一的区别是这调用setInterval而不是setTimeout('setInterval' vs 'setTimeout'(

请尝试在此处或在 JSFiddle 上运行代码片段：https://jsfiddle.net/raghav710/tbvmj4px/.这将在不刷新页面的情况下更新值。

编辑：添加了当前时间大于事件时间时处理的条件

 function get_elapsed_time_string(total_seconds) {
  var now = new Date();
  var eventDate = new Date();
  var currentTime = now.getTime();
  var eventTime = eventDate.setHours(17, 00, 0);
  var remTime = eventTime - currentTime;
  if(remTime <= 0){
  	clearInterval(interval_id);
    $("#hours").html(0);
    $("#minutes").html(0);
    $("#seconds").html(0);
  }
  var s = Math.floor(remTime / 1000);
  var m = Math.floor(s / 60);
  var h = Math.floor(m / 60);
  h %= 24;
  m %= 60;
  s %= 60;
  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;
  s = (s < 10) ? "0" + s : s;
  $("#hours").html(h);
  $("#minutes").html(m);
  $("#seconds").html(s);
}
var elapsed_seconds = 0;
var interval_id =
setInterval(function() {
  elapsed_seconds = elapsed_seconds + 1;
  get_elapsed_time_string(elapsed_seconds);
  console.log(interval_id);
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>

Answer 2

function countdown(){
            var now = new Date();
            var eventDate = new Date();
            var currentTiime = now.getTime();
            var eventTime = eventDate.setHours(16, 30, 0);
            var remTime = eventTime - currentTiime;
            var s = Math.floor(remTime / 1000);
            var m = Math.floor(s / 60);
            var h = Math.floor(m / 60);

            h %= 24;
            m %= 60;
            s %= 60;
            h = (h < 10) ? h +" hrs" : h + "hrs";
            h = (h <= 1) ? "" : h;
            m = (m < 10) ? "0" + m + " mins" : m + " mins ";

          if(now.getHours() >= 9 && currentTiime < eventTime){
           setTimeout(countdown, 1000);
             document.getElementById("timer").textContent = h + " " + m;
             }
          else if(now.getHours() < 9 || currentTiime >= eventTime){
            var t = document.getElementsByClassName("order-day")[0];
            t.getElementsByClassName("order-day")[0].textContent = "Order by 4:30pm for same day dispatch";
             hideCountdown();
               }