jQuery Timer that refreshes a div element when the minute changes

Question

I am trying to get a div element to update once one minute goes by from. I have a function in Javascript that counts down to a specific time in the day, however, I would like to use JQuery so that as the timer is counting down when the minute changes instead of having to refresh the browser it does it without refreshing.

I had a timer that displayed hours, minutes, seconds counting down to a specific setHours() using a setTimout to countdown.

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

At the moment I have a countdown that countdown to 16:30 but displays as: Hours: minutes: seconds: I would like Hours:xx minutes:xx and when the minute goes down 1 minute it shows in the div without refreshing the page.

Welcome to StackOverflow! did you take a look at https://stackoverflow.com/questions/2604450/how-to-create-a-jquery-clock-timer — S Raghav, Apr 01 '19 at 12:59
yes just explains how to create a setinterval timer with JQeury but not how to create a timer that goes down and updates every second, and thanks! — Brad Playdon, Apr 01 '19 at 13:48
The timer does update every second as you can see here https://jsfiddle.net/raghav710/tbvmj4px/1/ all that is to be done is to change the logic so that it counts down instead of up — S Raghav, Apr 01 '19 at 13:54
Quick question. Since JQuery and JS both would update the page without refreshing it is there a specific reason why you would want to use only JQuery. Is concise code a reason? — S Raghav, Apr 01 '19 at 13:55
The reason why I thought JQuery might need to be used is because the timer I have does update every second however if I remove the minutes from showing and just have the hours and minutes showing it then requires the page to be refreshed to show a minute as passed by — Brad Playdon, Apr 01 '19 at 14:06

S Raghav · Accepted Answer · 2019-04-02T05:33:30.723

Here is a solution that has a bit of JQuery strewn in. Please note that your Javascript solution will work as well. The only difference is that this calls setInterval instead of setTimeout ('setInterval' vs 'setTimeout')

Please try running the code snippet here or on JSFiddle: https://jsfiddle.net/raghav710/tbvmj4px/ . This updates the value without refreshing the page.

EDIT: Added condition to handle when the current time is greater than event time

 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>

Thanks raghav this is really helpful, I am now going to see which would be more efficient for speed thank you. — Brad Playdon, Apr 02 '19 at 10:25
@BradPlaydon happy to be of use! if you think this answers your question feel free to accept the answer. — S Raghav, Apr 02 '19 at 11:42
so I used that JQuery but found that when it hit the time it would just zero out so I came up with another solution — Brad Playdon, Apr 04 '19 at 13:01
@BradPlaydon feel free to post your solution as an answer to the question if you think it could help others looking for a similar solution — S Raghav, Apr 04 '19 at 16:12

score 0 · Answer 2 · answered Apr 05 '19 at 15:56

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 that refreshes a div element when the minute changes

2 Answers2