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

jQuery Timer，在分钟变化时刷新div元素

2 个答案: