When my minute reach to 60 it continues, how do I reset it to zero or back to zero? Here is the code:
var timeStart = 0;
var interval;
window.onload = function() {
interval = setInterval(function timeReady() {
var timeDisplay = document.getElementById("timeDisplay");
var hour = Math.floor(timeStart / 3600);
var min = Math.floor(timeStart / 60);
var sec = timeStart - (min * 60);
if (sec < 10) {
sec = "0" + sec;
}
var timeMsg = hour + ":" + min + ":" + sec;
timeDisplay.innerHTML = timeMsg;
timeStart++;
},1000)
document.getElementById("submitButton").onclick = function() {
clearInterval(interval);
};
};
This happens because you have wrong calculation of the minutes. Also I fixed your seconds calculation. Try this:
interval = setInterval(function timeReady() {
var timeDisplay = document.getElementById("timeDisplay");
var hour = Math.floor(timeStart / 3600);
var min = Math.floor((timeStart % 3600) / 60);
var sec = timeStart % 60;
if (sec < 10) {
sec = "0" + sec;
}
var timeMsg = hour + ":" + min + ":" + sec;
timeDisplay.innerHTML = timeMsg;
timeStart++;
},1000)
Related
I am working on the countdown timer and I have found this code which pretty much what I need except I dont want to restart the timer when it reaches 00:00. I tried to make changes but wasn't successfull.
Here is the JsFiddle code
<div id="countdown">1:00</div>
var seconds;
var temp;
var GivenTime=document.getElementById('countdown').innerHTML
console.log(GivenTime)
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
if (seconds == '') {
temp = document.getElementById('countdown');
temp.innerHTML = GivenTime;
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML= secondsToTime(seconds);
timeoutMyOswego = setTimeout(countdown, 1000);
}
function timeToSeconds(timeArray) {
var minutes = (timeArray[0] * 1);
var seconds = (minutes * 60) + (timeArray[1] * 1);
return seconds;
}
function secondsToTime(secs) {
var hours = Math.floor(secs / (60 * 60));
hours = hours < 10 ? '0' + hours : hours;
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
seconds = seconds < 10 ? '0' + seconds : seconds;
return minutes + ':' + seconds;
//hours + ':' +
}
countdown();
You could simply use clearTimeout function in your countdown when it reaches 00:00
Adding this if condition in your countdown is all you need.
if (secondsToTime(seconds) == '00:00') {
clearTimeout(timeoutMyOswego); //stop timer
}
Working Demo:
var seconds;
var temp;
var GivenTime = document.getElementById('countdown').innerHTML
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
if (seconds == '') {
temp = document.getElementById('countdown');
temp.innerHTML = GivenTime;
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML = secondsToTime(seconds);
var timeoutMyOswego = setTimeout(countdown, 1000);
if (secondsToTime(seconds) == '00:00') {
clearTimeout(timeoutMyOswego); //stop timer
console.log('Time"s UP')
}
}
function timeToSeconds(timeArray) {
var minutes = (timeArray[0] * 1);
var seconds = (minutes * 60) + (timeArray[1] * 1);
return seconds;
}
function secondsToTime(secs) {
var hours = Math.floor(secs / (60 * 60));
hours = hours < 10 ? '0' + hours : hours;
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
seconds = seconds < 10 ? '0' + seconds : seconds;
return minutes + ':' + seconds;
//hours + ':' +
}
countdown();
<div id="countdown">00:10</div>
You can try replacing the code which is responsible for restarting the timer.
But doing only that will result in timer going to negative values.
So as #Always Helping suggested, you need to add the code to stop the timer.
var seconds, temp;
var GivenTime = document.getElementById('countdown').innerHTML;
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
console.log(seconds);
// Do something when the timer is out
if (seconds === 0) {
clearTimeout(timeoutMyOswego);
return;
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML = secondsToTime(seconds);
timeoutMyOswego = setTimeout(countdown, 1000);
};
countdown();
function timeToSeconds(timeArray) {
var minutes = (timeArray[0] * 1);
var seconds = (minutes * 60) + (timeArray[1] * 1);
return seconds;
}
function secondsToTime(secs) {
var hours = Math.floor(secs / (60 * 60));
hours = hours < 10 ? '0' + hours : hours;
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
seconds = seconds < 10 ? '0' + seconds : seconds;
return minutes + ':' + seconds;
}
<div id="countdown">00:05</div>
I want to create a simple countdown timer, I found something its working only for seconds, I want to add hours:minutes:seconds...
how can I make the same timer for hh:mm:ss
<script type="text/javascript">
var seconds;
var temp;
function countdown() {
seconds = document.getElementById('countdown').innerHTML;
seconds = parseInt(seconds, 10);
if (seconds == 1) {
temp = document.getElementById('countdown');
temp.innerHTML = "00";
return;
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML = seconds;
timeoutMyOswego = setTimeout(countdown, 1000);
}
countdown();
</script>
var seconds;
var temp;
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
if (seconds == '') {
temp = document.getElementById('countdown');
temp.innerHTML = "00:00:00";
return;
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML = secondsToTime(seconds);
timeoutMyOswego = setTimeout(countdown, 1000);
}
function timeToSeconds(timeArray) {
var minutes = (timeArray[0] * 60) + (timeArray[1] * 1);
var seconds = (minutes * 60) + (timeArray[2] * 1);
return seconds;
}
function secondsToTime(secs) {
var hours = Math.floor(secs / (60 * 60));
hours = hours < 10 ? '0' + hours : hours;
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
seconds = seconds < 10 ? '0' + seconds : seconds;
return hours + ':' + minutes + ':' + seconds;
}
countdown();
<div id="countdown">01:02:15</div>
You may have different variables and different inner html's for the each part of your timer as hours for "hh", minutes for "mm" and seconds for "ss".. and for every step set the inner htmls equal to variables.
Initialize hours with some number and make it countdown by 1 when the others are zero and at the same time make the minutes and seconds equal to 59 and start counting down the seconds as the code you added above, then same thing goes for the minutes-seconds relation (when seconds are zero and minutes are not zero countdown minutes by one). At the end return if all the variables are zero..
Hope this helps..
You didn't say if you want to count up or down so here is a solution for both, just take the parts of the code you need:
(Fiddle: http://jsfiddle.net/Luc4oqo8/2/)
(I used jQuery here, you should use it too because its awesome)
HTML:
<div id="counter_up">
<p id="h">00</p>:<p id="m">00</p>:<p id="s">00</p>
</div>
<div id="counter_dn">
<p id="h">00</p>:<p id="m">00</p>:<p id="s">00</p>
</div>
JS:
var h_up = GetElementInsideContainer ("counter_up", "h");
var m_up = GetElementInsideContainer ("counter_up", "m");
var s_up = GetElementInsideContainer ("counter_up", "s");
var h_dn = GetElementInsideContainer ("counter_dn", "h");
var m_dn = GetElementInsideContainer ("counter_dn", "m");
var s_dn = GetElementInsideContainer ("counter_dn", "s");
// THIS COUNTS UP
setInterval ( function()
{
if (parseInt(s_up.innerHTML) < 59)
{
s_up.innerHTML = parseInt(s_up.innerHTML) + 1;
if (parseInt(s_up.innerHTML) < 10)
s_up.innerHTML = "0" + s_up.innerHTML;
}
else
{
s_up.innerHTML = 0;
if (parseInt(m_up.innerHTML) < 59)
{
m_up.innerHTML = parseInt(m_up.innerHTML) + 1;
if (parseInt(m_up.innerHTML) < 10)
m_up.innerHTML = "0" + m_up.innerHTML;
}
else
{
m_up.innerHTML = 0;
if (parseInt (h_up.innerHTML) < 23)
{
h_up.innerHTML = parseInt(h_up.innerHTML) + 1;
if (parseInt(h_up.innerHTML) < 10)
h_up.innerHTML = "0" + h_up.innerHTML;
}
else
{
h_up.innerHTML = m_up.innherHTML = s_up.innerHTML = 0;
}
};
}
}, 1000);
// THIS COUNTS DOWN
setInterval ( function()
{
if (parseInt(s_dn.innerHTML) > 0)
{
s_dn.innerHTML = parseInt(s_dn.innerHTML) - 1;
if (parseInt(s_dn.innerHTML) < 10)
s_dn.innerHTML = "0" + s_dn.innerHTML;
}
else
{
s_dn.innerHTML = 59;
if (parseInt(m_dn.innerHTML) > 0)
{
m_dn.innerHTML = parseInt(m_dn.innerHTML) - 1;
if (parseInt(m_dn.innerHTML) < 10)
m_dn.innerHTML = "0" + m_dn.innerHTML;
}
else
{
m_dn.innerHTML = 59;
if (parseInt (h_dn.innerHTML) > 0)
{
h_dn.innerHTML = parseInt(h_dn.innerHTML) - 1;
if (parseInt(h_dn.innerHTML) < 10)
h_dn.innerHTML = "0" + h_dn.innerHTML;
}
else
{
h_dn.innerHTML = 23;
m_dn.innherHTML = s_dn.innerHTML = 59;
}
};
}
}, 1000);
// Very useful, got it from here: http://stackoverflow.com/questions/7171483/simple-way-to-get-element-by-id-within-a-div-tag
function GetElementInsideContainer(containerID, childID)
{
var elm = {};
var elms = document.getElementById(containerID).getElementsByTagName("*");
for (var i = 0; i < elms.length; i++)
{
if (elms[i].id === childID)
{
elm = elms[i];
break;
}
}
return elm;
}
CSS:
p
{
display: inline-block;
}
if you have Seconds get hours and minutes as follow
var hours = parseInt( Your seconds here / 3600 ) % 24;
var minutes = parseInt( Your seconds here / 60 ) % 60;
var seconds = Your seconds here % 60;
here your complete time in HH:MM:SS
var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
Sort and sweet approach
I want to create a simple countdown timer.
I found something and its working for hours minute and seconds, I want only minutes:seconds...
how can I make the same timer for mm:ss format?
var seconds;
var temp;
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
if (seconds == '') {
temp = document.getElementById('countdown');
temp.innerHTML = "00:00:00";
return;
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML = secondsToTime(seconds);
timeoutMyOswego = setTimeout(countdown, 1000);
}
function timeToSeconds(timeArray) {
var minutes = (timeArray[0] * 60) + (timeArray[1] * 1);
var seconds = (minutes * 60) + (timeArray[2] * 1);
return seconds;
}
function secondsToTime(secs) {
var hours = Math.floor(secs / (60 * 60));
hours = hours < 10 ? '0' + hours : hours;
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
seconds = seconds < 10 ? '0' + seconds : seconds;
return hours + ':' + minutes + ':' + seconds;
}
countdown();
here is the html
<div id="countdown">01:02:15</div>
var seconds;
var temp;
console.clear();
function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
if (seconds == '') {
temp = document.getElementById('countdown');
temp.innerHTML = "00:00";
return;
}
seconds--;
temp = document.getElementById('countdown');
temp.innerHTML= secondsToTime(seconds);
timeoutMyOswego = setTimeout(countdown, 1000);
}
function timeToSeconds(timeArray) {
var minutes = (timeArray[0] * 1);
var seconds = (minutes * 60) + (timeArray[1] * 1);
return seconds;
}
function secondsToTime(secs) {
var hours = Math.floor(secs / (60 * 60));
hours = hours < 10 ? '0' + hours : hours;
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
seconds = seconds < 10 ? '0' + seconds : seconds;
return minutes + ':' + seconds;
}
countdown();
https://jsfiddle.net/santoshj/jex1f8uv/
var countDownController = function(seconds){
var countdownTimer = setInterval(startTimer, 1000);
function startTimer(){
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if(minutes<10){
minutes = "0"+ minutes;
}
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
// You can use which state you need!
console.log(days+":"+minutes+":"+hours+":"+remainingSeconds)
if (seconds == 0) {
clearInterval(countdownTimer);
//state for end timing
alert('time is up');
} else {
seconds--;
}
}
};
var timeToCountDown = 1232321;
countDownController(timeToCountDown);
var count = Number(sessionStorage.getItem('count')) || 3600;
var counter = setInterval(timer, 1000); //1000 will run it every 1 second
function timer() {
count = count - 1;
sessionStorage.setItem('count', count)
if (count == -1) {
clearInterval(counter);
return;
}
var seconds = count % 60;
var minutes = Math.floor(count / 60);
var hours = Math.floor(minutes / 60);
minutes %= 60;
hours %= 60;
var time_str = hours + ":h " + minutes + ":m " + seconds + ":s";
//document.cookie = 'time_str = hours + ":h " + minutes + ":m " + seconds + ":s"; expires=Thu, 26 March 20:47:11 UTC; path=/'
Array.prototype.forEach.call(document.querySelectorAll('.timer'), function (el ) { el.innerHTML = time_str; });
}
Above is my javascript code for countdown timer. This works fine, but it doesn't stop after "0h:0m:0s" time. it start counting in negative.
Here's a modified version of your code that works for me:
var count = 5;
var counter = setInterval(hockeytimer, 1000);
function hockeytimer() {
count = count - 1;
sessionStorage.setItem('count', count);
if (count == -1) {
clearInterval(counter);
return;
}
var seconds = count % 60;
var minutes = Math.floor(count / 60);
var hours = Math.floor(minutes / 60);
minutes %= 60;
hours %= 60;
if (hours === 0 && minutes === 0 && seconds === 0 ) {
var table = document.getElementById("hockeyt");
while (table.rows.length > 0 ) {
table.deleteRow();
}
}
var time_str = hours + ":h " + minutes + ":m " + seconds + ":s";
var timerCells = document.querySelectorAll('.hockeytimer');
for (var i = 0; i < timerCells.length; i++) {
var timerCell = timerCells[i];
timerCell.innerHTML = time_str;
}
}
Demo: http://jsbin.com/ceboqi/1/edit?html,js,output
I want to show clock with some difference . below given code is working fine for me. but i want to push and play this time whenever user want. i want to push and resume SetTimeout function .any one have any idea how to do that ?
$("#push").click(function () {
});
$("#play").click(function () {
show();
});
function show() {
var Digital = new Date();
var time2 = Digital.getTime();
var time1 = 1403517957984;
var diff = Math.abs(new Date(time2) - new Date(time1));
var seconds = Math.floor(diff / 1000); //ignore any left over units smaller than a second
var minutes = Math.floor(seconds / 60);
seconds = seconds % 60;
var hours = Math.floor(minutes / 60);
minutes = minutes % 60;
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
$('#worked_time').html(hours + ":" + minutes + ":" + seconds);
setTimeout("show()", 1000);
}
show();
This is a mix of the respond of #colburton and #TwiStar
Respond correctly to the answer
var isPlaying = true;
var toHandle = null;
$("#push").click(function () {
isPlaying = false;
if (toHandle !== null)
{
clearTimeout(toHandle);
toHandle = null;
}
});
$("#play").click(function () {
isPlaying = true;
show();
});
function show() {
if (isPlaying) {
toHandle = null;
var Digital = new Date();
var time2 = Digital.getTime();
var time1 = 1403517957984;
var diff = Math.abs(new Date(time2) - new Date(time1));
var seconds = Math.floor(diff / 1000); //ignore any left over units smaller than a second
var minutes = Math.floor(seconds / 60);
seconds = seconds % 60;
var hours = Math.floor(minutes / 60);
minutes = minutes % 60;
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
$('#worked_time').html(hours + ":" + minutes + ":" + seconds);
toHandle = setTimeout("show()", 1000);
}
}
show();
Save the handle to a variable:
var toHandle = null;
// start timeout
toHandle = setTimeout("show()", 1000);
Then you can cancel the timeout any time you want with:
// cancel timeout
if (toHandle) {
clearTimeout(toHandle);
toHandle = null;
}
Quick and dirty. Surround you show-function with an if which checks a "should i show the time"-flag:
var doShow = true;
$("#push").click(function () {
doShow = false;
});
$("#play").click(function () {
doShow = true;
show();
});
function show() {
if(doShow == true) {
var Digital = new Date();
var time2 = Digital.getTime();
var time1 = 1403517957984;
var diff = Math.abs(new Date(time2) - new Date(time1));
var seconds = Math.floor(diff / 1000); //ignore any left over units smaller than a second
var minutes = Math.floor(seconds / 60);
seconds = seconds % 60;
var hours = Math.floor(minutes / 60);
minutes = minutes % 60;
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
$('#worked_time').html(hours + ":" + minutes + ":" + seconds);
setTimeout("show()", 1000);
}
}
show();