CODEWITHSUNDEEP
javascriptjquery
andreaem
andreaem

Reputation: 1655

jQuery time clock counter

I'm trying to make a simple jQuery Time counter just to count the user working time in my application displaying hours and minutes

HTML:

<body>
   <div><input type="text" class="time"/></div>
</body>

JS:

function startTimer(duration) {
   var timer = duration,hours, minutes;
   setInterval(function () {
        hours   = parseInt(timer / 3600, 10)
        minutes = parseInt(timer / 60, 10);

        hours   = hours   < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;

        $('input[type=text].time').val(hours + ":" + minutes);

        if (++timer < 0) {
           timer = 0;
        }

    }, 1);
}

jQuery(function ($) {
  var minutes = 0
  startTimer(minutes);
});

Fiddle: http://jsfiddle.net/df773p9m/1856/

The problem is that at this time the counter does not reset when reach 60 minutes and continues to count, although the hours were updated.

Notes: I've set the interval to 1 ms in order to test the operation.

Upvotes: 1

Views: 1225

Answers (2)

oqx
oqx

Reputation: 2367

you should use % after the division, otherwise it'll continue

check this updated jsfiddle

EDIT

Sean is right, I have fixed the code, the 24 should be in the % not the division also note that I'm multiplying duration by 60 to get the mins from the seconds

no need for the reset mins line anymore

function startTimer(duration) {
    var timer = duration*60,hours, minutes;
    setInterval(function () {
            hours   = parseInt((timer / 3600)%24, 10)
        minutes = parseInt((timer / 60)%60, 10);

        hours   = hours   < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;

        $('input[type=text].time').val(hours + ":" + minutes);

        if (++timer < 0) {
            timer = 0;
        }
    }, 1);
}

jQuery(function ($) {
    var minutes = 1339;
    startTimer(minutes);
});

Upvotes: 1

Sean Kendle
Sean Kendle

Reputation: 3609

http://jsfiddle.net/df773p9m/1859/

If your timer is in minutes, and it's counting up one minute at a time, you want to divide the total time by 60 to get hours. Then you can get the remainder with the modulo operator % for the remaining minutes:

function startTimer(duration, display) {
    var timer = duration,
    hours, 
    minutes;

    setInterval(function () {
        hours   = parseInt(timer / 60, 10);
        minutes = parseInt(timer % 60, 10);

        hours   = hours   < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;

        $('#time').val(hours + ":" + minutes);

        // I have no idea what you're trying to do here, it appears this will never evaluate to true:
        if (++timer < 0) {
            timer = duration;
        }


    }, 100); // this number should be changed to 60000 for it to be one minute (60,000 milliseconds = 1 minute)


}

jQuery(function ($) {
    var minutes = 0,
        display;
    startTimer(minutes, display);
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_()

Remainder (%)

The remainder operator returns the remainder left over when one operand is divided by a second operand. It always takes the sign of the dividend, not the divisor. It uses a built-in modulo function to produce the result, which is the integer remainder of dividing var1 by var2 — for example — var1 modulo var2. There is a proposal to get an actual modulo operator in a future version of ECMAScript, the difference being that the modulo operator result would take the sign of the divisor, not the dividend.

Upvotes: 1

Related Questions