Show time user has been on a page

Question

I've been working on showing user's how long they spent on a certain page. I think I may have over complicated it. Currently I am showing them the number of minutes and then showing them the number of seconds. This almost works except when its at two minutes 5 seconds for example it looks like this: 2:5 instead of 2:05. Then once it hits 10 seconds its fine: 2:10.

Any idea how I'd change my code to correct this? Thanks!

var timer;
var timerStart;
var timeSpentOnSite = getTimeSpentOnSite();

function getTimeSpentOnSite(){
    timeSpentOnSite = parseInt(localStorage.getItem('timeSpentOnSite'));
    timeSpentOnSite = isNaN(timeSpentOnSite) ? 0 : timeSpentOnSite;
    return timeSpentOnSite;
}

function startCounting(){
    timerStart = Date.now();
    timer = setInterval(function(){
        timeSpentOnSite = getTimeSpentOnSite()+(Date.now()-timerStart);
        localStorage.setItem('timeSpentOnSite',timeSpentOnSite);
        timerStart = parseInt(Date.now());
        // Convert to seconds
        $("#timeSpentMin").html(parseInt(timeSpentOnSite/1000 / 60));
        $("#timeSpentSec").html(parseInt(timeSpentOnSite/1000 % 60));
    },1000);
}
startCounting();

Answer 1

You can use this simple function:

function padTime(time) {
  return ("0" + time).slice(-2);
}

Pass it any time portion you want and it will pad it for you:

 var min = 5; var sec = 2; console.log("Unpadded: " + min + ":" + sec); console.log("Padded seconds: " + min + ":" + padTime(sec)); console.log("Padded minutes & seconds: " + padTime(min) + ":" + padTime(sec)); min = 12; sec = 52; console.log("Unpadded: " + min + ":" + sec); console.log("Padded seconds: " + min + ":" + padTime(sec)); console.log("Padded minutes & seconds: " + padTime(min) + ":" + padTime(sec)); function padTime(time) { return ("0" + time).slice(-2); } 

Answer 2

A simple padding of the values less than 10 could do the trick. So something like the following

function padValue(value) {
  if (value < 10) {
    return '0' + value;
  }
  return value;
}

And then for the minutes value, you can write it as follows:

$("#timeSpentSec").html( padValue(parseInt(timeSpentOnSite/1000 % 60)) );

Answer 3

change your function to the following , check for the number of digits in the seconds and mins section by converting them with toString() and callin .length see below

function startCounting() {
  timerStart = Date.now();
  timer = setInterval(function() {
    timeSpentOnSite = getTimeSpentOnSite() + (Date.now() - timerStart);
    localStorage.setItem('timeSpentOnSite', timeSpentOnSite);
    timerStart = parseInt(Date.now());

    // Convert to seconds
    let sec = parseInt(timeSpentOnSite / 1000 % 60);
    sec = sec.toString().length < 2 ? '0' + sec : sec;
    let min = parseInt(timeSpentOnSite / 1000 / 60);
    min = min.toString().length < 2 ? '0' + min : min;




    $("#timeSpentMin").html(min);
    $("#timeSpentSec").html(sec);
  }, 1000);
}

Answer 4

To pad a number in JavaScript, you can use the built-in padStart method. You can use the function below to return a formatted string, given integer parameters (if you're passing in strings, you can ignore the toString() call).

function formatTime(hour, minute) {
  return `${hour}:${minute.toString().padStart(2, '0')}`;
}