We Keep Coding

JS CountDown no reload on refresh please

Well my code should be working but it isn't. Each time I reload the time, my Countdown start back at his initialised value.
Since I'm not familliar with JS you may be able to m'éclaircir the mind
<script>
var upgradeTime = 172801;
var seconds = upgradeTime;
function timer() {
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;
function pad(n) {
return (n < 10 ? "0" + n : n);
}
document.getElementById('countdown').innerHTML = pad(days) + ":" + pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()',1000,function() {
secondPassed();
if (seconds === 0) {
eraseCookie(seconds);
} else {
createCookie(seconds, seconds, 7);
}
});
</script>
How do I call it
<h1>Server Release in : <span id="countdown" class="timer"></span></h1>
I just want my timer to not refresh each time you reload the page.
Any kind of help would be appreciated

Here you go.
var upgradeTime = 172801; //Timer length in ms
var timerMS = window.localStorage.getItem("date");
startTimer();
function timer() {
var difference = timerMS - Date.now();
if (difference <= 0) {
startTimer();
return;
}
var seconds = (difference / 1000).toFixed(0),
days = Math.floor(seconds / 24 / 60 / 60),
hoursLeft = Math.floor((seconds) - (days * 86400)),
hours = Math.floor(hoursLeft / 3600),
minutesLeft = Math.floor((hoursLeft) - (hours * 3600)),
minutes = Math.floor(minutesLeft / 60),
remainingSeconds = seconds % 60;
function pad(n) {
return (n < 10 ? "0" + n : n);
}
document.getElementById('countdown').innerHTML = pad(days) + ":" + pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
setTimeout(timer, 1000);
}
function startTimer() {
if (!timerMS || timerMS < Date.now()) {
timerMS = Date.now() + upgradeTime;
window.localStorage.setItem("date", timerMS);
}
timer();
}

Countdown Timer Problems

I have been looking for a count down timer on google and can't seem to find one.
I was just wondering if anyone would be able to help.
I got given one but it displays the wrong times.
I want it to display days, hours, minutes and seconds left.
heres what I need the timer on
http://pastebin.com/fQjyRFXw
It already has the timer code there but it's all wrong, any help would be great, thank you
If it's helps here's a snippet of the Java code
var count = <?= $time['a_time'] ?>;
var counter = setInterval(timer, 1000); //1000 will* run it every 1 second
function timer() {
count = count - 1;
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;
document.getElementById("clock").innerHTML = hours + "hours " + minutes + "minutes and " + seconds + " seconds left";
}

Ok I see your problem. The a_time stored in database is an Unix timestamp, thus when you are counting down, you need to know how long is between now and a_time instead of only a_time.
Try this:
var count = <?= $time['a_time'] ?>;
var now = Math.floor(new Date().getTime() / 1000);
count = count - now;
var counter = setInterval(timer, 1000); //1000 will* run it every 1 second
function timer() {
count = count - 1;
if(count == -1) {
clearInterval(counter);
return;
}
var seconds = count % 60;
var minutes = Math.floor(count / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
minutes %= 60;
hours %= 24;
document.getElementById("clock").innerHTML = days + "days " + hours + "hours " + minutes + "minutes and " + seconds + " seconds left";
}

Why not use one of the man examples on codepen such as this beautiful one
http://codepen.io/anon/pen/VeLWdz ?
(function (e) {
e.fn.countdown = function (t, n) {
function i() {
eventDate = Date.parse(r.date) / 1e3;
currentDate = Math.floor(e.now() / 1e3);
if (eventDate <= currentDate) {
n.call(this);
clearInterval(interval)
}
seconds = eventDate - currentDate;
days = Math.floor(seconds / 86400);
seconds -= days * 60 * 60 * 24;
hours = Math.floor(seconds / 3600);
seconds -= hours * 60 * 60;
minutes = Math.floor(seconds / 60);
seconds -= minutes * 60;
days == 1 ? thisEl.find(".timeRefDays").text("day") : thisEl.find(".timeRefDays").text("days");
hours == 1 ? thisEl.find(".timeRefHours").text("hour") : thisEl.find(".timeRefHours").text("hours");
minutes == 1 ? thisEl.find(".timeRefMinutes").text("minute") : thisEl.find(".timeRefMinutes").text("minutes");
seconds == 1 ? thisEl.find(".timeRefSeconds").text("second") : thisEl.find(".timeRefSeconds").text("seconds");
if (r["format"] == "on") {
days = String(days).length >= 2 ? days : "0" + days;
hours = String(hours).length >= 2 ? hours : "0" + hours;
minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
seconds = String(seconds).length >= 2 ? seconds : "0" + seconds
}
if (!isNaN(eventDate)) {
thisEl.find(".days").text(days);
thisEl.find(".hours").text(hours);
thisEl.find(".minutes").text(minutes);
thisEl.find(".seconds").text(seconds)
} else {
alert("Invalid date. Example: 30 Tuesday 2013 15:50:00");
clearInterval(interval)
}
}
var thisEl = e(this);
var r = {
date: null,
format: null
};
t && e.extend(r, t);
i();
interval = setInterval(i, 1e3)
}
})(jQuery);
$(document).ready(function () {
function e() {
var e = new Date;
e.setDate(e.getDate() + 60);
dd = e.getDate();
mm = e.getMonth() + 1;
y = e.getFullYear();
futureFormattedDate = mm + "/" + dd + "/" + y;
return futureFormattedDate
}
$("#countdown").countdown({
date: "1 April 2017 09:00:00", // Change this to your desired date to countdown to
format: "on"
});
});

My minutes on timer doesn't reset to zero

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)

Simple countdown timer

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

Trying to create a 24 hour timer that resets itself

This is the code I have. Very messy, but due to my inexperience I can't detect why it does not work. By my counts the Decrements are js standard, at least for the milliseconds, seconds and minutes, not sure about the hours.
Here's the code. Thanks in advance.
<!DOCTYPE html>
<html>
<body>
<span id="tHours"></span>:<span id="tMins"></span>:<span id="tSeconds"></span>:<span id="tMilli"></span>
<script>
var hours = 1;
var mins = hours * 60;
var secs = mins * 60;
var mill = secs * 100;
var currentHours = 0;
var currentSeconds = 0;
var currentMinutes = 0;
vas currentMilli = 0;
setTimeout('DecrementMilli()',100);
setTimeout('DecrementSeconds()',1000);
setTimeout('DecrementMinutes()',10000);
setTimeout('DecrementHours()',100000);
function DecrementMilli() {
currentMilli = secs % 100;
if(currentMilli <= 99) currentMilli = "000" + currentMilli;
secs--;
document.getElementById("tMilli").innerHTML = currentMilli;
if(mill !== -1) setTimeout('Decrement()',100);
}
function DecrementSeconds() {
currentSeconds = secs % 60;
if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
secs--;
document.getElementById("tSeconds").innerHTML = currentSeconds;
if(secs !== -1) setTimeout('Decrement()',1000);
}
function DecrementMinutes() {
currentMinutes = Math.round(secs / 60);
if(currentMinutes <= 60) currentMinutes = "00";
mins--;
document.getElementById("tMins").innerHTML = currentMinutes;
if(mins !== -1) setTimeout('Decrement()',10000);
}
function DecrementHours() {
currentHours = Math.round(1440 / 60);
if(currentHours <= 24) currentHours - 1;
hours--;
document.getElementById("tHours").innerHTML = currentHours;
if(hours !== -1) setTimeout('Decrement()',100000);
}
</script>
</body>
</html>

The time in your intervals is wrong. You can try the code below. Just put thee vars in your html, like:
<span id='tHours'>23</span>:<span id='tMins'>59</span>:<span id='tSeconds'>59</span>:<span id='tMilli'>99</span>
And the js like:
var milli = 99;
var sec = 59;
var min = 59;
var hour = 23;
setInterval(function () {
milli = milli == 0 ? 99 : milli - 1;
$('#tMilli').text(double0(milli));
},10);
setInterval(function () {
sec = sec == 0 ? 59 : sec - 1;
$('#tSec').text(double0(sec));
},1000);
setInterval(function () {
min = min == 0 ? 59 : min - 1;
$('#tMin').text(double0(min));
},60000);
setInterval(function () {
hour = hour == 0 ? 23 : hour - 1;
$('#tHour').text(double0(hour));
},1440000);
function double0 (num) {
num = num.toString().length == 1 ? '0' + num : num;
return num;
}

Well, I solved my own problem, but it's inelegant since it does not start at 24:00:00 but at 23:59:59. But it's a start.
I'll post it here in case it helps anyone
<script type="text/javascript">
var count = 86400;
var counter = setInterval(timer, 1000);
function timer() {
count = count - 1;
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;
document.getElementById("timer").innerHTML = hours + ":" + minutes + ":" + seconds; // watch for spelling
}
</script>
<span id='timer'></span>