I have a time counter that works for 120 seconds (i.e 2 minutes. Although it is working fine, but i want that it should get displayed in terms of minutes and second. here is the code at JS FIDDLE

<span id="count">2:00</span> 
<button type="submit" id="startClock" form="form1"value="Submit">Submit</button>

$('#startClock').click(function(){
    var counter = 120;
  setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    if (counter === 0) {
        alert('sorry, out of time');
        clearInterval(counter);
    }
  }, 1000);

});

I want that the result should get displayed like this

02:00

and the timer should go on decreasing

I have a time counter that works for 120 seconds (i.e 2 minutes. Although it is working fine, but i want that it should get displayed in terms of minutes and second. here is the code at JS FIDDLE

<span id="count">2:00</span> 
<button type="submit" id="startClock" form="form1"value="Submit">Submit</button>

$('#startClock').click(function(){
    var counter = 120;
  setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    if (counter === 0) {
        alert('sorry, out of time');
        clearInterval(counter);
    }
  }, 1000);

});

I want that the result should get displayed like this

02:00

and the timer should go on decreasing

• javascript
• jquery

Share Improve this question Follow asked Jun 10, 2015 at 4:53 user4590850user4590850 2

• You divide with / operator ) – zerkms Commented Jun 10, 2015 at 4:55
• Here's a countdown timer i made once,jsfiddle/rstsu5zs based on rendro.github.io/easy-pie-chart. feel free to use it – andrew Commented Jun 10, 2015 at 5:24

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 4

use this code to convert your seconds to m:s format:

var str = parseInt(counter / 60) + ':' + (counter % 60);

full code:

$('#startClock').click(function() {
    var counter = 120;
    setInterval(function() {
        counter--;
        var str = parseInt(counter / 60) + ':' + (counter % 60);
        if (counter >= 0) {
            span = document.getElementById("count");
            span.innerHTML = str;
        }
        if (counter === 0) {
            alert('sorry, out of time');
            clearInterval(counter);
        }
    }, 1000);

});

jsfiddle

You can use Date Object:

var d = new Date(counter * 1000);  
span.innerHTML = d.getMinutes() + ':' + d.getSeconds();

This is also work

var min = parseInt(counter/60);
var sec = Math.abs(counter - (min*60));

Fiddle

Use this functions:

var 
 millisecToTimeStruct = function (ms) {
        var d, h, m, s;
        if (isNaN(ms)) {
            return {};
        }
        d = ms / (1000 * 60 * 60 * 24);
        h = (d - ~~d) * 24;
        m = (h - ~~h) * 60;
        s = (m - ~~m) * 60;
        return {
            d: ~~d,
            h: ~~h,
            m: ~~m,
            s: ~~s
        };
    },
    toFormattedStr = function (tStruct) {
        var res = '';
        if (typeof tStruct === 'object') {
            res += tStruct.m + ':' + tStruct.s;
        }
        return res;
    };

http://jsfiddle/dk2or4qs/5/

you can use :

html:

<span id="count">02:00</span>
<button type="submit" id="startClock" form="form1" value="Submit">Submit</button>

js:

$('#startClock').click(function () {
    var counter = 120;
    setInterval(function () {
        counter--;
        if (counter >= 0) {
            span = document.getElementById("count");
            var time =new Date(counter*1000);
            var m = time.getMinutes();
            m = m<10?'0'+m:m;
            var s = time.getSeconds();
            span.innerHTML = m+':'+s;
        }
        if (counter === 0) {
            alert('sorry, out of time');
            clearInterval(counter);
        }
    }, 1000);
});

demo

this will change the timer with the format "02:00".

You can change

 span.innerHTML = counter;

by :

var m = Math.floor(counter/60);
var s = counter-(m*60);
if(s<10){s="0"+s;}
span.innerHTML =m+":"+s;

and it would work for any number of time down to 0:01

Here's you fiddle forked and tuned: http://jsfiddle/6LL7ofyp/1/

Try (format mm:ss):

var span = document.querySelector("#count");

function countDown(counter){

	var interval = setInterval(function(){
		
		var minutes = ((counter / 60) | 0) + "";
		var seconds = (counter % 60) + "";
		var format = ""
                      + new Array(3-minutes.length).join("0") + minutes 
                      + ':' 
                      + new Array(3-seconds.length).join("0") + seconds;

		span.innerHTML = format;

		counter--;

		if(counter === 0){
			clearInterval(interval);
			alert('sorry, out of time')
		}
        
	},1e3)
}

countDown(120);

<span id="count"><span>