CODEWITHSUNDEEP
javascriptjquerytimer
Blues Clues
Blues Clues

Reputation: 1858

jQuery time count

Here's the scenario, I have a time that counts the time_taken by a user. What I want is to get the exact time_taken based from the timer. For example, a user take an exam, then after he/she take the exam, the time_taken will be submitted (e.g. 1hr 25mins 23secs). Please see my code below. 

$(document).ready(function(){
  var d;
  setInterval(function(){
    d = new Date();
    dates = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
    $('#timeTaken').val(dates);
  }, 1000);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<input type="text" id="timeTaken" value="">

Upvotes: 1

Views: 311

Answers (3)

Dawid Zbiński
Dawid Zbiński

Reputation: 5826

I don't really see the point to use an input there, you can just display in a span and when the form gets submitted take the time elapsed and send it with other data. Anyways, this should work for you:

$(document).ready(function () {
    var time_start = new Date();
    setInterval(function () {
        var time_end      = new Date();
        var time_diff = (time_end - time_start);

        // hours
        var hours     = Math.floor(time_diff / 1000 / 60 / 60);

        // minutes
        time_diff     = time_diff - hours * 1000 * 60 * 60;
        var minutes   = Math.floor(time_diff / 1000 / 60);

        // seconds
        time_diff     = time_diff - minutes * 1000 * 60;
        var seconds   = Math.floor(time_diff / 1000);

        renderTime(hours, minutes, seconds);
    }, 1000);
});

function renderTime (hrs, min, sec) {
    var str = convertTime(hrs) + ":" + convertTime(min) + ":" + convertTime(sec);
    $("#timeTaken").val(str);
}

function convertTime (val) {
    return val < 10 ? "0" + val : val;
}

What's going on here is we have the time_start which does not change and we have setInterval function that is triggered every second. There we create new Date object, and the subtract the static one from it, which returns the time difference in milliseconds. We do the weird Math.flooring and subtracting, so we can have hours, minutes and seconds as an integers (not floats). Then we use render function to display the time inside an desired element.

Why I think it's a better solution then the others are, is that if you want to handle the user's page refresh you just need to save one variable to cookie or something else and it will work regardless of the page refresh.

Handling the page refresh would look like (with cookie saved for 2 hrs): 

function updateTimeCookie () {
    var time_now = new Date()
    var value    = JSON.stringify(time_now);
    var expires  = time_now.setTime(time_now.getTime() + 7200);
    $.cookie("timeStart", value, { expires: expires });
};

// to get Date object from cookie: new Date(JSON.parse($.cookie("timeStart")))

To use $.cookie() you must first include jQuery Cookie Plugin.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

Working fiddle without cookie: https://jsfiddle.net/qc3axmf4/1/

Working fiddle with cookie: https://jsfiddle.net/ta8bnzs0/2/

Upvotes: 1

Prabodh M
Prabodh M

Reputation: 2262

Here is Fiddle for the solution

https://jsfiddle.net/djzsddz6/1/

Ans Solution is below:

$(document).ready(function(){
  var seconds = 0, minutes = 0 , hours = 0;
  setInterval(function(){
    seconds++;
    if(seconds == 60){
      minutes++
      seconds = 0;
    }

    if(minutes == 60){
      hours++
      minutes = 0;
    }
    console.log(hours, minutes, seconds);
    $('#timeTaken').val(`${hours}:${minutes}:${seconds}`);
  }, 1000);

});

Upvotes: 3

Pavan
Pavan

Reputation: 337

Rather than getting date at every second you can keep the counter in set interval which will updated at every second. At the time of submission you can perform division and modulus operation to get exact time taken

Example

$(document).ready(function(){
     var timer =0;
     setInterval(function(){
     Timer +=1;
     // Code for display in hr mm        and ss
      $('#timeTaken').val(dates);
     }, 1000'

});

You can also convert second in time valueby using moment.js Hope this helps you. Happy coding

Upvotes: 0

Related Questions