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);
}
Related
I am struggling to make this code to work with localStorage so if anyone can help me that would be amazing. How do I implement a localStorage in order to save the countdown when refreshing the page?
var hour = 5 * 3600;
var minute = 5 * 60;
var deadline = hour + minute;
function formatTime(seconds) {
var hide = false;
var h = Math.floor(seconds / 3600),
m = Math.floor(seconds / 60) % 60;
return h + m;
}
var counter = setInterval(timer, 1000);
function timer() {
deadline--;
if (deadline < 0) {
return clearInterval(counter);
}
$('#deadline').html(formatTime(deadline));
}
Store the value in the localStorage everytime the value gets decreased.
When you reload the page, check if the stored time exists, if yes store it in your deadline variable, otherwise let the deadline be the initial one.
var hour = 5 * 3600;
var minute = 5 * 60;
var deadline = hour + minute;
function formatTime(seconds) {
var hide = false;
var h = Math.floor(seconds / 3600),
m = Math.floor(seconds / 60) % 60;
console.log(h)
console.log(m)
return h + m;
}
var counter;
var storedTime = localStorage.getItem('deadline')
if (storedTime) {
deadline = Number(storedTime)
}
counter = setInterval(timer, 1000);
function timer() {
--deadline;
localStorage.setItem('time', deadline);
if (deadline < 0) {
return clearInterval(counter);
}
$('#deadline').html(formatTime(deadline));
}
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 run this countdown timer but it's not working please help me
I try to generate a random number between two numbers and start timer but it's working please help me
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;
}
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
var count = getRandomArbitrary(21000,23000);
var counter = setInterval(timer, 1000);
function timer() {
console.log(count);
if (parseInt(count) <= 0) {
clearInterval(counter);
return;
}
var temp = count.toHHMMSS();
count = (parseInt(count) - 1).toString();
$('#timer').html(temp);
}
HTML code
<div id="timer"></div>
You have extended the string prototype with your conversion function, but you're not using a string (count is a number from the getRandom... method). Use a normal function instead, and it will work on more types:
toHHMMSS = function (str) {
var sec_num = parseInt(str, 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;
}
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
var count = getRandomArbitrary(21000,23000);
var counter = setInterval(timer, 1000);
function timer() {
console.log(count);
if (parseInt(count) <= 0) {
clearInterval(counter);
return;
}
var temp = toHHMMSS(count);
count = (parseInt(count) - 1).toString();
$('#timer').html(temp);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timer"></div>
Try my code.
Your code problem is that you didn't convert count.toHHMMSS(); this line into string when you call.
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;
}
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
var count = getRandomArbitrary(21000,23000);
var counter = setInterval(timer, 1000);
function timer() {
console.log(count);
if (parseInt(count) <= 0) {
clearInterval(counter);
return;
}
var temp = count.toString().toHHMMSS();
count = (parseInt(count) - 1).toString();
$('#timer').html(temp);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="timer"></div>
I'm making a riddle where people have 45 minutes to find the solution, but I want the timer to go down five minutes when they answer incorrectly to prevent them from just guessing the answer. This is what I have for the timer:
function startTimer(duration, display) {
var start = Date.now(),
diff,
minutes,
seconds;
function timer() {
diff = duration - (((Date.now() - start) / 1000) | 0);
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
var cat1 = $("input[#name=Verdachte]:checked");
if (cat1.val() != "2") {
cat1.val("you are right :)");
cat1.attr("disabled", true);
start -= 1000 * 60 * 5;
}
if (diff <= 0) {
start = Date.now() + 1000;
}
};
timer();
setInterval(timer, 1000);
}
window.onload = function() {
var fortyfiveMinutes = 60 * 45,
display = document.querySelector('#time');
startTimer(fortyfiveMinutes, display);
}
But it just keeps subtracting five minutes all the time, so I made a send button for it:
$("#results").click(function() {
if (cat1.val() === "2") {
cat1.val("you are right :)");
cat1.attr("disabled", true);
start -= 1000 * 60 * 5;
}
};
But now the timer just disappears completely, how can I fix this?
try this , I create a new function to check value and set varaibles as globals to access easy ,and change value of 'start' if value of textbox is wrong
var start = Date.now();
function startTimer(duration, display) {
var diff,
minutes,
seconds;
function timer() {
diff = duration - (((Date.now() - start) / 1000) | 0);
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (diff <= 0) {
start = Date.now() + 1000;
}
};
timer();
setInterval(timer, 1000);
}
window.onload = function() {
var fortyfiveMinutes = 60 * 45,
display = document.querySelector('#time');
startTimer(fortyfiveMinutes, display);
}
function checkValue() {
var cat1 = $("#Verdachte");
if (cat1.val() == "2" || cat1.attr("disabled")) {
cat1.val("you are right :)");
cat1.attr("disabled", true);
} else {
cat1.val("Wrong :(");
start -= 1000 * 60 * 5;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="time"></div>
<input id="Verdachte">
<button onclick="checkValue()"> click me</button>
var currentTime = audio.currentTime | 0;
var duration = audio.duration | 0;
it works but,
it shows the audio's total length and current time in only second format
i want to convert the default second value in Minute:Second format
Try this (lightly tested):
var seconds = currentTime % 60;
var foo = currentTime - seconds;
var minutes = foo / 60;
if(seconds < 10){
seconds = "0" + seconds.toString();
}
var fixedCurrentTime = minutes + ":" + seconds;
var currentTime = audio.currentTime | 0;
var duration = audio.duration | 0;
var minutes = "0" + Math.floor(duration / 60);
var seconds = "0" + (duration - minutes * 60);
var dur = minutes.substr(-2) + ":" + seconds.substr(-2);
var minutes = "0" + Math.floor(currentTime / 60);
var seconds = "0" + (currentTime - minutes * 60);
var cur = minutes.substr(-2) + ":" + seconds.substr(-2);
You can simply write the code yourself; it's not as if it's complicated or would ever change:
function pad(num, size) {
var s = num + '';
while (s.length < size) {
s = '0' + s;
}
return s;
}
function format_seconds(secs) {
return Math.floor(secs / 60) + ':' + (pad(secs % 60, 2));
}
dropping my own answer after 5 years and 9 months.
function() {
if(this.myAudio.readyState > 0) {
var currentTime = this.myAudio.currentTime;
var duration = this.myAudio.duration;
var seconds: any = Math.floor(duration % 60);
var foo = duration - seconds;
var min: any = foo / 60;
var minutes: any = Math.floor(min % 60);
var hours: any = Math.floor(min / 60);
if(seconds < 10){
seconds = "0" + seconds.toString();
}
if(hours > 0){
this.audioDuration = hours + ":" + minutes + ":" + seconds;
} else {
this.audioDuration = minutes + ":" + seconds;
}
}
}
I used typescript, hope this helps...