CODEWITHSUNDEEP
javascriptjquerytimer
Ali Zia
Ali Zia

Reputation: 3875

Create a count up timer in javascript

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?

Upvotes: 0

Views: 2328

Answers (3)

JohnV
JohnV

Reputation: 59

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>

Upvotes: 1

Alok
Alok

Reputation: 297

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>

Upvotes: 0

Mayank Raj
Mayank Raj

Reputation: 1624

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>

Upvotes: 2

Related Questions