7

I found a JSFiddle with a timer that counts up every second. Except i want this to work with just the minutes and seconds. No hours.

Any ideas?

Community
  • 1
  • 1
mike
  • 71
  • 1
  • 1
  • 2

6 Answers6

9
  • DATE_OBJ.getSeconds() to get seconds of Date object.
  • DATE_OBJ. getMinutes() to get minutes of Date object.
  • setInterval to invoke handler function after every second(1000ms).

var handler = function() {
  var date = new Date();
  var sec = date.getSeconds();
  var min = date.getMinutes();
  document.getElementById("time").textContent = (min < 10 ? "0" + min : min) + ":" + (sec < 10 ? "0" + sec : sec);
};
setInterval(handler, 1000);
handler();
<h1 id="time" style="text-align: center"></h1>
Rayon
  • 36,219
  • 4
  • 49
  • 76
7

Here's a very hackish approach - http://jsfiddle.net/gPrwW/1/

HTML -

<div id="worked">31:14</div>

JS :

$(document).ready(function (e) {
    var $worked = $("#worked");

    function update() {
        var myTime = $worked.html();
        var ss = myTime.split(":");
        var dt = new Date();
        dt.setHours(0);
        dt.setMinutes(ss[0]);
        dt.setSeconds(ss[1]);

        var dt2 = new Date(dt.valueOf() + 1000);
        var temp = dt2.toTimeString().split(" ");
        var ts = temp[0].split(":");

        $worked.html(ts[1]+":"+ts[2]);
        setTimeout(update, 1000);
    }

    setTimeout(update, 1000);
});
Vandesh
  • 6,368
  • 1
  • 26
  • 38
5

The precise way of handling this is the following:

  1. store the time of the start of the script
  2. in a function that gets called repeatedly get the time elapsed
  3. convert the elapsed time in whatever format you want and show it

Sample code:

var initialTime = Date.now();

function checkTime(){
  var timeDifference = Date.now() - initialTime;
  var formatted = convertTime(timeDifference);
  document.getElementById('time').innerHTML = '' + formatted;
}

function convertTime(miliseconds) {
  var totalSeconds = Math.floor(miliseconds/1000);
  var minutes = Math.floor(totalSeconds/60);
  var seconds = totalSeconds - minutes * 60;
  return minutes + ':' + seconds;
}
window.setInterval(checkTime, 100);

You can easily change the granularity of checking the time (currently set at 0.1 seconds). This timer has the advantage that it will never be out of sync when it updates.

Tibos
  • 27,507
  • 4
  • 50
  • 64
  • 2
    I would just add the following for it to show 09:05 instead of 9:5 `var minutes = leftPad(Math.floor(totalSeconds/60),2); var seconds = leftPad(totalSeconds - minutes * 60,2);` where: `function leftPad (aNumber, aLength) { if (aNumber.toString().length >= aLength return aNumber; return (Math.pow(10, aLength) + Math.floor(aNumber)).toString().substring(1); }` – JoeGalind Mar 15 '15 at 00:52
3

You can make a function that increments a counter every time it's called, shows the value as: counter/60 minutes, counter%60 seconds

Then you can use the setInterval function to make JavaScript call your code every second. It's not extremely precise, but it's good enough for simple timers.

Emre
  • 1,239
  • 9
  • 7
2
var initialTime = Date.now();

function checkTime(){
var timeDifference = Date.now() - initialTime;
var formatted = convertTime(timeDifference);
document.getElementById('time').innerHTML = '' + formatted;
}

function convertTime(miliseconds) {
var totalSeconds = Math.floor(miliseconds/1000);
var minutes = Math.floor(totalSeconds/60);
var seconds = totalSeconds - minutes * 60;
return minutes + ':' + seconds;
}
window.setInterval(checkTime, 100);
  • You should include an explanation with you example code to help others understand what your code snippet does. – Todd May 11 '17 at 23:46
0

This might be something? plain count up timer in javascript

It is based on the setInterval method

setInterval(setTime, 1000);
Sam Hanley
  • 4,707
  • 7
  • 35
  • 63
Hiny
  • 195
  • 7
  • 21