jQuery Timer在分钟更改时刷新div元素

Question

我试图让一个div元素更新一分钟一次。我在Javascript中有一个函数可以计算到当天的特定时间，但是，我想使用JQuery，因为当分钟更改时计时器正在倒计时，而不是必须刷新浏览器，它没有刷新。

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

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();
               }