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

Possible duplicate of [How can I pad a value with leading zeros?](https://stackoverflow.com/questions/1267283/how-can-i-pad-a-value-with-leading-zeros) — , Jan 07 '18 at 20:50
@ChrisG Hey Chris could you show me how to implement it in that case? — AndrewLeonardi, Jan 07 '18 at 20:50

Racil Hilan · Accepted Answer · 2018-01-07T21:21:40.313

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

score 1 · Answer 2 · answered Jan 07 '18 at 20:56

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

score 0 · Answer 3 · answered Jan 07 '18 at 21:03

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

score 0 · Answer 4 · answered Jan 07 '18 at 21:04

0

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

answered Jan 07 '18 at 21:04

jhpratt

6,841
16
40
50

The `padStart()` function is not supported in older browsers. It's supported by MS Edge, but not IE. The exact same applies to the **template literals** (the string with back ticks). – Racil Hilan Jan 07 '18 at 21:19

Show time user has been on a page

4 Answers4