Could you please tell me how to run timer from 0 to 10 min in JavaScript?
Here is my code:
var secondsToMinutesAndSeconds = function (time) {
// Minutes and seconds
var mins = ~~(time / 60);
var secs = time % 60;
// Hours, minutes and seconds
var hrs = ~~(time / 3600);
var mins = ~~((time % 3600) / 60);
var secs = time % 60;
var ret = ""; //OUPUT: HH:MM:SS or MM:SS
if (hrs > 0) {
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
}
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
ret += "" + secs;
return ret;
};
// time given by server
var uitat = 600;
var jobSessionTime ;
function callAtInterval() {
if (parseInt(uitat) > 0) {
uitat = parseInt(uitat) - 1;
jobSessionTime = secondsToMinutesAndSeconds(uitat);
console.log(jobSessionTime)
} else {
console.log('=====')
}
}
// time given by server 600
jobSessionTime = secondsToMinutesAndSeconds(600);
var stop = setInterval(callAtInterval, 1000);
Currently it prints from 10:00 to 00:00 yet
i want it to print from 00:00 to 10:00.
https://jsbin.com/reqocerefa/3/edit?html,js,console
var secondsToMinutesAndSeconds = function (time) {
// Minutes and seconds
var mins = ~~(time / 60);
var secs = time % 60;
// Hours, minutes and seconds
var hrs = ~~(time / 3600);
var mins = ~~((time % 3600) / 60);
var secs = time % 60;
var ret = ""; //OUPUT: HH:MM:SS or MM:SS
if (hrs > 0) {
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
}
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
ret += "" + secs;
return ret;
};
// time given by server
var uitat = 0;
var jobSessionTime ;
function callAtInterval() {
if (parseInt(uitat) < 600) {
uitat = parseInt(uitat) + 1;
jobSessionTime = secondsToMinutesAndSeconds(uitat);
console.log(jobSessionTime)
} else {
clearInterval(stop);
}
}
// time given by server 600
jobSessionTime = secondsToMinutesAndSeconds(0);
var stop = setInterval(callAtInterval, 1000);
Try this:
var secondsToMinutesAndSeconds = function (time) {
// Minutes and seconds
var mins = ~~(time / 60);
var secs = time % 60;
// Hours, minutes and seconds
var hrs = ~~(time / 3600);
var mins = ~~((time % 3600) / 60);
var secs = time % 60;
var ret = ""; //OUPUT: HH:MM:SS or MM:SS
if (hrs > 0) {
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
}
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
ret += "" + secs;
return ret;
};
// time given by server
var uitat = 0;
var jobSessionTime ;
function callAtInterval() {
if (parseInt(uitat) < 600) {
uitat = parseInt(uitat) + 1;
jobSessionTime = secondsToMinutesAndSeconds(uitat);
console.log(jobSessionTime)
} else {
console.log('=====');
clearInterval(stop); // stop timer
}
}
// time given by server 0
jobSessionTime = secondsToMinutesAndSeconds(0);
var stop = setInterval(callAtInterval, 1000);
You would just make these changes to start at zero and count up to 600 seconds:
// ...
var uitat = 0; // Change `= 600` to `= 0` to start at 0 seconds
var jobSessionTime;
function callAtInterval() {
if (parseInt(uitat) < 600) { // Change `> 0` to `< 600` to stop at 600 seconds
uitat = parseInt(uitat) + 1; // Change `- 1` to `+ 1` to count up
// ...
Here is the complete code with the changes:
var secondsToMinutesAndSeconds = function(time) {
// Minutes and seconds
var mins = ~~(time / 60);
var secs = time % 60;
// Hours, minutes and seconds
var hrs = ~~(time / 3600);
var mins = ~~((time % 3600) / 60);
var secs = time % 60;
var ret = ""; //OUPUT: HH:MM:SS or MM:SS
if (hrs > 0) {
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
}
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
ret += "" + secs;
return ret;
};
// time given by server
var uitat = 0; // Change `= 600` to `= 0` to start at 0 seconds
var jobSessionTime;
function callAtInterval() {
if (parseInt(uitat) < 600) { // Change `> 0` to `< 600` to stop at 600 seconds
uitat = parseInt(uitat) + 1; // Change `- 1` to `+ 1` to count up
jobSessionTime = secondsToMinutesAndSeconds(uitat);
console.log(jobSessionTime);
} else {
console.log('=====')
}
}
// time given by server 600
jobSessionTime = secondsToMinutesAndSeconds(600);
var stop = setInterval(callAtInterval, 1000);
Here is the code with 600 held in a parameter:
var secondsToMinutesAndSeconds = function (time) {
// Minutes and seconds
var mins = ~~(time / 60);
var secs = time % 60;
// Hours, minutes and seconds
var hrs = ~~(time / 3600);
var mins = ~~((time % 3600) / 60);
var secs = time % 60;
var ret = ""; //OUPUT: HH:MM:SS or MM:SS
if (hrs > 0) {
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
}
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
ret += "" + secs;
return ret;
};
// time given by server
var uitat = 600;
var current = 0;
var jobSessionTime;
function callAtInterval() {
if (current < uitat) {
current += 1;
jobSessionTime = secondsToMinutesAndSeconds(current);
console.log(jobSessionTime)
} else {
console.log('=====')
clearInterval(stop);
}
}
jobSessionTime = secondsToMinutesAndSeconds(0);
var stop = setInterval(callAtInterval, 1000);
I'm trying to get my button to stop counting clicks after a 10 second count down timer has finished but I don't know how to stop it properly.
When I try to use:
if (seconds < 1)
Then it just comes up with this error in the console:
Uncaught ReferenceError:
seconds is not defined
at onClick ((index):60)
at HTMLButtonElement.onclick ((index):18)
onClick # (index):60
onclick # (index):18
Can someone help me with this?
Here is my code so far:
<body>
<p align="center">
<button class="button" style="width:500px;height:200px;" id="submit2" onClick="onClick()" align="center">Click me!</button>
</p>
<div id="countdowntimertxt" class="countdowntimer" align="center">00:00</div>
<script type="text/javascript">
var sTime = new Date().getTime();
var countDown = 10; // Number of seconds to count down from.
function UpdateCountDownTime() {
var cTime = new Date().getTime();
var diff = cTime - sTime;
var timeStr = '';
var seconds = countDown - Math.floor(diff / 1000);
if (seconds >= 0) {
var hours = Math.floor(seconds / 3600);
var minutes = Math.floor( (seconds-(hours*3600)) / 60);
seconds -= (hours*3600) + (minutes*60);
if( hours < 10 ){
timeStr = "" + hours;
}
if( minutes < 10 ){
timeStr = timeStr + ":0" + minutes;
}else{
timeStr = timeStr + ":" + minutes;
}
if( seconds < 10){
timeStr = timeStr + ":0" + seconds;
}else{
timeStr = timeStr + ":" + seconds;
}
document.getElementById("countdowntimertxt").innerHTML = timeStr;
}else{
document.getElementById("countdowntimertxt").style.display="none";
clearInterval(counter);
}
}
UpdateCountDownTime();
var counter = setInterval(UpdateCountDownTime, 500);
var clicks = 0;
function onClick() {
if (seconds < 1) {
clearInterval(clicks)
}else{
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
};
</script>
<p align="center">Clicks: <a id="clicks">0</a></p>
</p>
</body>
You define seconds inside of UpdateCountDownTime() but also access it in onClick. The value in onClick (since we are running in non-strict mode) will be on the global scope and be undefined. Since undefined < 1 will always evaluate to false, then the interval will never be cleared from a click.
You might try adding a var seconds outside of UpdateCountDownTime and then update that, i.e.
var sTime = new Date().getTime();
var countDown = 10; // Number of seconds to count down from.
var seconds = 10; // Number of remaining seconds
function UpdateCountDownTime() {
var cTime = new Date().getTime();
var diff = cTime - sTime;
var timeStr = '';
seconds = countDown - Math.floor(diff / 1000);
var sTime = new Date().getTime();
var countDown = 10; // Number of seconds to count down from.
var seconds;
function UpdateCountDownTime() {
var cTime = new Date().getTime();
var diff = cTime - sTime;
var timeStr = '';
seconds = countDown - Math.floor(diff / 1000);
if (seconds >= 0) {
var hours = Math.floor(seconds / 3600);
var minutes = Math.floor( (seconds-(hours*3600)) / 60);
seconds -= (hours*3600) + (minutes*60);
if( hours < 10 ){
timeStr = "" + hours;
}
if( minutes < 10 ){
timeStr = timeStr + ":0" + minutes;
}else{
timeStr = timeStr + ":" + minutes;
}
if( seconds < 10){
timeStr = timeStr + ":0" + seconds;
}else{
timeStr = timeStr + ":" + seconds;
}
document.getElementById("countdowntimertxt").innerHTML = timeStr;
}else{
document.getElementById("countdowntimertxt").style.display="none";
clearInterval(counter);
}
}
UpdateCountDownTime();
var counter = setInterval(UpdateCountDownTime, 500);
var clicks = 0;
function onClick() {
if (seconds < 1) {
clearInterval(clicks)
}else{
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
};
<p align="center">
<button class="button" style="width:500px;height:200px;" id="submit2" onClick="onClick()" align="center">Click me!</button>
</p>
<div id="countdowntimertxt" class="countdowntimer" align="center">00:00</div>
<p align="center">Clicks: <a id="clicks">0</a></p>
</p>
var seconds should be Global variable.
var button1 = document.getElementById("start");
var button2 = document.getElementById("stop");
var timegraph = document.getElementById("ceas");
var lapButton = document.getElementById("lap");
var lame = document.getElementById("test");
var time = 0;
var ResetStart = 0;
var myInterval;
var body = document.getElementById("body");
var action = document.getElementById("lappara");
function Start() {
if (ResetStart == 0) {
ResetStart = 1;
Running();
button1.innerHTML = "Pause";
}
else {
ResetStart = 0;
button1.innerHTML = "Resume";
clearInterval(myInterval);
}
}
function Reset() {
time = 0;
ResetStart = 0;
button1.innerHTML = "Start";
timegraph.innerHTML = "00:00:00:00";
clearInterval(myInterval);
var aux = action.parentNode;
aux.removeChild(action);
}
function OnGoing() {
time++;
var hours = Math.floor(time / 100 / 60 / 60);
var minutes = Math.floor(time / 100 / 60 % 60);
var seconds = Math.floor(time / 100 % 60);
var hundreds = Math.floor(time / 10 % 10);
var thousands = time % 10;
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
timegraph.innerHTML = hours + ":" + minutes + ":" + seconds + ":" + hundreds + thousands;
}
function Running() {
if (ResetStart == 1) {
myInterval = setInterval(OnGoing, 10);
}
else {
timegraph.innerHTML = "00:00:00:00";
}
}
function Lap() {
var n = document.createElement("p");
n.setAttribute("id", "lappara");
var text = document.createTextNode(timegraph.innerHTML);
n.appendChild(text);
body.insertBefore(n, action);
}
Whenever i call the Reset() function i get the error above. This code is supposed to be a stopwatch and the Lap() function just creates laps. I looked up some solutions but none seemed to work. Please help me if you can
I assume you can call Reset() once but next time you call it the error appears. This is because of aux.removeChild(action). You delete action and then you try to get it's parentNode - that's where the problem is.
I think you call func Reset() before create element with id lappara by lap() func or call Reset() function several times.
I want to use a simple countdown timer starting at 30 seconds from when the function is run and ending at 0. No milliseconds. How can it be coded?
var count=30;
var counter=setInterval(timer, 1000); //1000 will run it every 1 second
function timer()
{
count=count-1;
if (count <= 0)
{
clearInterval(counter);
//counter ended, do something here
return;
}
//Do code for showing the number of seconds here
}
To make the code for the timer appear in a paragraph (or anywhere else on the page), just put the line:
<span id="timer"></span>
where you want the seconds to appear. Then insert the following line in your timer() function, so it looks like this:
function timer()
{
count=count-1;
if (count <= 0)
{
clearInterval(counter);
return;
}
document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
}
I wrote this script some time ago:
Usage:
var myCounter = new Countdown({
seconds:5, // number of seconds to count down
onUpdateStatus: function(sec){console.log(sec);}, // callback for each second
onCounterEnd: function(){ alert('counter ended!');} // final action
});
myCounter.start();
function Countdown(options) {
var timer,
instance = this,
seconds = options.seconds || 10,
updateStatus = options.onUpdateStatus || function () {},
counterEnd = options.onCounterEnd || function () {};
function decrementCounter() {
updateStatus(seconds);
if (seconds === 0) {
counterEnd();
instance.stop();
}
seconds--;
}
this.start = function () {
clearInterval(timer);
timer = 0;
seconds = options.seconds;
timer = setInterval(decrementCounter, 1000);
};
this.stop = function () {
clearInterval(timer);
};
}
So far the answers seem to rely on code being run instantly. If you set a timer for 1000ms, it will actually be around 1008 instead.
Here is how you should do it:
function timer(time,update,complete) {
var start = new Date().getTime();
var interval = setInterval(function() {
var now = time-(new Date().getTime()-start);
if( now <= 0) {
clearInterval(interval);
complete();
}
else update(Math.floor(now/1000));
},100); // the smaller this number, the more accurate the timer will be
}
To use, call:
timer(
5000, // milliseconds
function(timeleft) { // called every step to update the visible countdown
document.getElementById('timer').innerHTML = timeleft+" second(s)";
},
function() { // what to do after
alert("Timer complete!");
}
);
Here is another one if anyone needs one for minutes and seconds:
var mins = 10; //Set the number of minutes you need
var secs = mins * 60;
var currentSeconds = 0;
var currentMinutes = 0;
/*
* The following line has been commented out due to a suggestion left in the comments. The line below it has not been tested.
* setTimeout('Decrement()',1000);
*/
setTimeout(Decrement,1000);
function Decrement() {
currentMinutes = Math.floor(secs / 60);
currentSeconds = secs % 60;
if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
secs--;
document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
if(secs !== -1) setTimeout('Decrement()',1000);
}
// Javascript Countdown
// Version 1.01 6/7/07 (1/20/2000)
// by TDavid at http://www.tdscripts.com/
var now = new Date();
var theevent = new Date("Sep 29 2007 00:00:01");
var seconds = (theevent - now) / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
ID = window.setTimeout("update();", 1000);
function update() {
now = new Date();
seconds = (theevent - now) / 1000;
seconds = Math.round(seconds);
minutes = seconds / 60;
minutes = Math.round(minutes);
hours = minutes / 60;
hours = Math.round(hours);
days = hours / 24;
days = Math.round(days);
document.form1.days.value = days;
document.form1.hours.value = hours;
document.form1.minutes.value = minutes;
document.form1.seconds.value = seconds;
ID = window.setTimeout("update();", 1000);
}
<p><font face="Arial" size="3">Countdown To January 31, 2000, at 12:00: </font>
</p>
<form name="form1">
<p>Days
<input type="text" name="days" value="0" size="3">Hours
<input type="text" name="hours" value="0" size="4">Minutes
<input type="text" name="minutes" value="0" size="7">Seconds
<input type="text" name="seconds" value="0" size="7">
</p>
</form>
Just modified #ClickUpvote's answer:
You can use IIFE (Immediately Invoked Function Expression) and recursion to make it a little bit more easier:
var i = 5; //set the countdown
(function timer(){
if (--i < 0) return;
setTimeout(function(){
console.log(i + ' secs'); //do stuff here
timer();
}, 1000);
})();
var i = 5;
(function timer(){
if (--i < 0) return;
setTimeout(function(){
document.getElementsByTagName('h1')[0].innerHTML = i + ' secs';
timer();
}, 1000);
})();
<h1>5 secs</h1>
Expanding upon the accepted answer, your machine going to sleep, etc. may delay the timer from working. You can get a true time, at the cost of a little processing. This will give a true time left.
<span id="timer"></span>
<script>
var now = new Date();
var timeup = now.setSeconds(now.getSeconds() + 30);
//var timeup = now.setHours(now.getHours() + 1);
var counter = setInterval(timer, 1000);
function timer() {
now = new Date();
count = Math.round((timeup - now)/1000);
if (now > timeup) {
window.location = "/logout"; //or somethin'
clearInterval(counter);
return;
}
var seconds = Math.floor((count%60));
var minutes = Math.floor((count/60) % 60);
document.getElementById("timer").innerHTML = minutes + ":" + seconds;
}
</script>
For the sake of performances, we can now safely use requestAnimationFrame for fast looping, instead of setInterval/setTimeout.
When using setInterval/setTimeout, if a loop task is taking more time than the interval, the browser will simply extend the interval loop, to continue the full rendering. This is creating issues. After minutes of setInterval/setTimeout overload, this can freeze the tab, the browser or the whole computer.
Internet devices have a wide range of performances, so it's quite impossible to hardcode a fixed interval time in milliseconds!
Using the Date object, to compare the start Date Epoch and the current. This is way faster than everything else, the browser will take care of everything, at a steady 60FPS (1000 / 60 = 16.66ms by frame) -a quarter of an eye blink- and if the task in the loop is requiring more than that, the browser will drop some repaints.
This allow a margin before our eyes are noticing (Human = 24FPS => 1000 / 24 = 41.66ms by frame = fluid animation!)
https://caniuse.com/#search=requestAnimationFrame
/* Seconds to (STRING)HH:MM:SS.MS ------------------------*/
/* This time format is compatible with FFMPEG ------------*/
function secToTimer(sec){
const o = new Date(0), p = new Date(sec * 1000)
return new Date(p.getTime()-o.getTime()).toString().split(" ")[4] + "." + p.getMilliseconds()
}
/* Countdown loop ----------------------------------------*/
let job, origin = new Date().getTime()
const timer = () => {
job = requestAnimationFrame(timer)
OUT.textContent = secToTimer((new Date().getTime() - origin) / 1000)
}
/* Start looping -----------------------------------------*/
requestAnimationFrame(timer)
/* Stop looping ------------------------------------------*/
// cancelAnimationFrame(job)
/* Reset the start date ----------------------------------*/
// origin = new Date().getTime()
span {font-size:4rem}
<span id="OUT"></span>
<br>
<button onclick="origin = new Date().getTime()">RESET</button>
<button onclick="requestAnimationFrame(timer)">RESTART</button>
<button onclick="cancelAnimationFrame(job)">STOP</button>
You can do as follows with pure JS. You just need to provide the function with the number of seconds and it will do the rest.
var insertZero = n => n < 10 ? "0"+n : ""+n,
displayTime = n => n ? time.textContent = insertZero(~~(n/3600)%3600) + ":" +
insertZero(~~(n/60)%60) + ":" +
insertZero(n%60)
: time.textContent = "IGNITION..!",
countDownFrom = n => (displayTime(n), setTimeout(_ => n ? sid = countDownFrom(--n)
: displayTime(n), 1000)),
sid;
countDownFrom(3610);
setTimeout(_ => clearTimeout(sid),20005);
<div id="time"></div>
Based on the solution presented by #Layton Everson I developed a counter including hours, minutes and seconds:
var initialSecs = 86400;
var currentSecs = initialSecs;
setTimeout(decrement,1000);
function decrement() {
var displayedSecs = currentSecs % 60;
var displayedMin = Math.floor(currentSecs / 60) % 60;
var displayedHrs = Math.floor(currentSecs / 60 /60);
if(displayedMin <= 9) displayedMin = "0" + displayedMin;
if(displayedSecs <= 9) displayedSecs = "0" + displayedSecs;
currentSecs--;
document.getElementById("timerText").innerHTML = displayedHrs + ":" + displayedMin + ":" + displayedSecs;
if(currentSecs !== -1) setTimeout(decrement,1000);
}
// Javascript Countdown
// Version 1.01 6/7/07 (1/20/2000)
// by TDavid at http://www.tdscripts.com/
var now = new Date();
var theevent = new Date("Nov 13 2017 22:05:01");
var seconds = (theevent - now) / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
ID = window.setTimeout("update();", 1000);
function update() {
now = new Date();
seconds = (theevent - now) / 1000;
seconds = Math.round(seconds);
minutes = seconds / 60;
minutes = Math.round(minutes);
hours = minutes / 60;
hours = Math.round(hours);
days = hours / 24;
days = Math.round(days);
document.form1.days.value = days;
document.form1.hours.value = hours;
document.form1.minutes.value = minutes;
document.form1.seconds.value = seconds;
ID = window.setTimeout("update();", 1000);
}
<p><font face="Arial" size="3">Countdown To January 31, 2000, at 12:00: </font>
</p>
<form name="form1">
<p>Days
<input type="text" name="days" value="0" size="3">Hours
<input type="text" name="hours" value="0" size="4">Minutes
<input type="text" name="minutes" value="0" size="7">Seconds
<input type="text" name="seconds" value="0" size="7">
</p>
</form>
My solution works with MySQL date time formats and provides a callback function. on complition.
Disclaimer: works only with minutes and seconds, as this is what I needed.
jQuery.fn.countDownTimer = function(futureDate, callback){
if(!futureDate){
throw 'Invalid date!';
}
var currentTs = +new Date();
var futureDateTs = +new Date(futureDate);
if(futureDateTs <= currentTs){
throw 'Invalid date!';
}
var diff = Math.round((futureDateTs - currentTs) / 1000);
var that = this;
(function countdownLoop(){
// Get hours/minutes from timestamp
var m = Math.floor(diff % 3600 / 60);
var s = Math.floor(diff % 3600 % 60);
var text = zeroPad(m, 2) + ':' + zeroPad(s, 2);
$(that).text(text);
if(diff <= 0){
typeof callback === 'function' ? callback.call(that) : void(0);
return;
}
diff--;
setTimeout(countdownLoop, 1000);
})();
function zeroPad(num, places) {
var zero = places - num.toString().length + 1;
return Array(+(zero > 0 && zero)).join("0") + num;
}
}
// $('.heading').countDownTimer('2018-04-02 16:00:59', function(){ // on complete})
var hr = 0;
var min = 0;
var sec = 0;
var count = 0;
var flag = false;
function start(){
flag = true;
stopwatch();
}
function stop(){
flag = false;
}
function reset(){
flag = false;
hr = 0;
min = 0;
sec = 0;
count = 0;
document.getElementById("hr").innerHTML = "00";
document.getElementById("min").innerHTML = "00";
document.getElementById("sec").innerHTML = "00";
document.getElementById("count").innerHTML = "00";
}
function stopwatch(){
if(flag == true){
count = count + 1;
setTimeout( 'stopwatch()', 10);
if(count ==100){
count =0;
sec = sec +1;
}
}
if(sec ==60){
min = min +1 ;
sec = 0;
}
if(min == 60){
hr = hr +1 ;
min = 0;
sec = 0;
}
var hrs = hr;
var mins = min;
var secs = sec;
if(hr<10){
hrs ="0" + hr;
}
if(min<10){
mins ="0" + min;
}
if(sec<10){
secs ="0" + sec;
}
document.getElementById("hr").innerHTML = hrs;
document.getElementById("min").innerHTML = mins;
document.getElementById("sec").innerHTML = secs;
document.getElementById("count").innerHTML = count;
}
I want to countdown timer in format of hh:mm:ss so I use this code it's convert seconds into required format but when I count down it display me NaN. Can you tell me what I am doing wrong
Here is code
<div id="timer"></div>
JS
String.prototype.toHHMMSS = function () {
var sec_num = parseInt(this, 10); // don't forget the second parm
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var time = hours + ':' + minutes + ':' + seconds;
return time;
}
var count = '62';
count = count.toHHMMSS();
var counter = setInterval(timer, 1000);
function timer() {
count--;
if (count <= 0) {
clearInterval(counter);
return;
}
$('#timer').html(count);
}
Here is JsFiddle link CountDown Timer
Well, let's take a look at what your code does:
Set count to the string value 62.
Convert it to HHMMSS, so now count is equal to the string 00:01:02
Start the timer.
On the first run of the timer, decrement count. Erm... count is a string, you can't decrement it. The result is not a number.
Okay, so with that out of the, way how about fixing it:
function formatTime(seconds) {
var h = Math.floor(seconds / 3600),
m = Math.floor(seconds / 60) % 60,
s = seconds % 60;
if (h < 10) h = "0" + h;
if (m < 10) m = "0" + m;
if (s < 10) s = "0" + s;
return h + ":" + m + ":" + s;
}
var count = 62;
var counter = setInterval(timer, 1000);
function timer() {
count--;
if (count < 0) return clearInterval(counter);
document.getElementById('timer').innerHTML = formatTime(count);
}
var count = '62'; // it's 00:01:02
var counter = setInterval(timer, 1000);
function timer() {
if (parseInt(count) <= 0) {
clearInterval(counter);
return;
}
var temp = count.toHHMMSS();
count = (parseInt(count) - 1).toString();
$('#timer').html(temp);
}
http://jsfiddle.net/5LWgN/17/
If you use the jquery moment plugin. If you are not using jQuery moment then you can use formatTime(seconds) function that is in the #Niet's answer https://stackoverflow.com/a/18506677/3184195
var start_time = 0;
var start_timer = null;
start_timer = setInterval(function() {
start_time++;
var formate_time = moment.utc(start_time * 1000).format('mm:ss');
$('#Duration').text(formate_time);
}, 1000);
});
function clear() {
if (start_timer) clearInterval(start_timer);
}