Create a count up timer in javascript

Question

I want to make a simple timer that counts up in javascript. When my ajax runs successfully, it should start and the result should be like this

1 sec ago
2 sec ago
.
.
1 min ago (for 60 sec)
2 min ago (for 60 sec)
... and so on

I am googling and I can't find any such timer. Any suggestions?

Check out setTimeOut, w3schools.com/js/js_timing.asp

Banana
– Banana

2017-04-10 07:43:26 +00:00
Commented Apr 10, 2017 at 7:43 — Banana
– Banana, Commented Apr 10, 2017 at 7:43

Mayank Raj · Accepted Answer · 2017-04-10 07:53:03Z

2

You can do so by checking if the counter (used to keep a tab on seconds passed) is below 60 or not. If it's more than 60 then simply divide it with 60 and you can change the float value to int to get the mins. TIP: If you need the minutes accurate upto xx secs you can use the toFixed(2) function instead of the parseInt

Here's the solution

var elem = $('span');
var count = 0;
setInterval(function() {
  if (count > 60) { // We check if the timer is in seconds or mins
    var time = ++count; // We get a copy of the time in 'seconds'
    time = parseInt(time / 60); // We convert it to mins
    $(elem).text(time + 'm');
  } else { // Simmilarly we can also add a condition to check hours with s=3600
    $(elem).text(++count + 's');
  }
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <span>0</span> ago...
</p>

answered Apr 10, 2017 at 7:53

Mayank Raj

1,62412 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Peter Over a year ago

javscript timeouts are not accurate, you should use start timestamp and substract seconds from current timestamp

Mayank Raj Over a year ago

It should not be a problem in the solution I've mentioned. I purposely took the dom retrieval of the span element outside the function. Feel free to correct me, but the costly operation here is that of setting the dom element value. Which would happen in either case. Timestamps would be much slower compared to counter as it would involve generating a date object and then manipulating it

Ali Zia Over a year ago

Worked like a charm. Thankyou!

JohnV · Accepted Answer · 2017-04-10 08:32:32Z

Please see the following code, it should be adaptable enough to implement into your code.

// save the current time on load to use for compairing.
var savedTime = new Date();
// save the timers object into a variable for speed when referencing
var timer = $('#timer');
// declare timer var
var timerInterval;

function startTimer() {
  // save the timer into a variable called timerInterval so we can stop it later
  timerInterval = setInterval(function() {

    // save the time difference into a var for reference
    var time = time_diff(savedTime);

    // set the spans text to the timer text.
    timer.text(time);

    // call to function after 30 seconds to stop timer
    if (parseInt(time) == 30) stopTimer();

  }, 1000); // 1000 = 1 second, 2000 = 2 seconds etc ...;
}

// function to stop timer if needed
function stopTimer() {
  clearInterval(timerInterval);
}

// function to work out the difference in time by milliseconds.
function time_diff(time) {
  var diff = new Date() - time;
  var msec = diff;
  var hh = Math.floor(msec / 1000 / 60 / 60);
  msec -= hh * 1000 * 60 * 60;
  var mm = Math.floor(msec / 1000 / 60);
  msec -= mm * 1000 * 60;
  var ss = Math.floor(msec / 1000);
  msec -= ss * 1000;
  if (hh > 0) {
    var uom = (hh == 1) ? "hour" : "hours";
    return hh + " " + uom;
  }
  if (hh < 1 && mm > 0) {
    var uom = (mm == 1) ? "minute" : "minutess";
    return mm + " " + uom;
  }
  if (hh < 1 && mm < 1) {
    var uom = (ss == 1) ? "second" : "seconds";
    return ss + " " + uom;
  }
}


// click event to stop timer.
$(document).on('click','#stopTimer',function(e){
  stopTimer();
});

$(document).on('click','#startTimer',function(e){
  startTimer();
});

$(document).on('click','#resetTimer',function(e){
   savedTime = new Date();
   timer.text('0 seconds');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Timer : <span id="timer">0 seconds</span></p>
<p><button id="startTimer">Start Timer</button><button id="stopTimer">Stop Timer</button><button id="resetTimer">Reset Timer</button></p>

Alok · Accepted Answer · 2017-04-10 08:09:57Z

0

Try with below code. Upvote the answer if it helps.

var counter = 0;
var _minute = 60;
var _hour = 3600;

setInterval(function(){
		counter++;
    
		if(counter > (_minute-1) && counter < (_hour-1)){
    		$('div#show-count').html(Math.floor(counter/_minute) + ' minute ago');
    }else if(counter > _hour){
    		$('div#show-count').html(Math.floor(counter/_hour) + ' hour ago');
    }else{
    		$('div#show-count').html(counter + ' sec ago');
    }
    
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-count"></div>

answered Apr 10, 2017 at 8:09

Alok

2973 silver badges13 bronze badges

Collectives™ on Stack Overflow

Create a count up timer in javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related