My script is OK in Chrome, but in FireFox and IE the result is: NaN:NaN.
This is my script: Anyone knows whats wrong?
Output of $db[time] is : 2013-10-07 14:28:35 (Timestamp database)
<script>
var end = new Date('<?=$db[time]?>');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'ITS NOW TIME!</font><BR><BR>';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = '<font color="orange">' + minutes + ':';
document.getElementById('countdown').innerHTML += '<font color="orange">' + seconds + ' minutes</font>';
}
timer = setInterval(showRemaining, 1000);
</script>
This is because of the value of $db[time].
You said in a comment the format of the date/time is 2013-10-07 14:28:35 which is the default DATETIME output for MySQL, when it needs to be 2013-10-07T14:28:35.
Chrome supports the 2013-10-07 14:28:35 format as a convenience however it's not in the Javascript spec, so not all other browsers do.
Try this:
<? echo str_replace(' ', 'T', $db['time']); ?>
javascript time format different from php so firefox will display NaN:NaN:NaN. you should covert time as below:
PHP date format
$yourDate = date("M d, Y H:i:s", strtotime($db['time'])));
get time like this
date = new date("<?=$yourDate?>").getTime();
You could parse the date string yourself rather than relying on a modern browsers with modern methods, something like the following should be cross-browser friendly. Countdown is in milliseconds, you can format it as you wish.
HTML
<div id="countdown"></div>
Javascript
function isGregorianLeapYear(year) {
return year % 400 === 0 || year % 100 !== 0 && year % 4 === 0;
}
function daysInGregorianMonth(year, month) {
var days;
if (month == 2) {
days = 28;
if (isGregorianLeapYear(year)) {
days += 1;
}
} else {
days = 31 - ((month - 1) % 7 % 2);
}
return days;
}
function timeStampToDate(timeStamp) {
var dateObject,
dateTime,
date,
time,
value;
if (typeof timeStamp === "string") {
dateTime = timeStamp.split(" ");
if (dateTime.length === 2) {
date = dateTime[0].split("-");
if (date.length === 3) {
value = +date[0];
if (date[0].length === 4 && value >= -9999 && value <= 9999) {
value = +date[1];
if (date[1].length === 2 && value >= 1 && value <= 12) {
date[1] = value - 1;
value = +date[2];
if (date[2].length === 2 && value >= 1 && value <= daysInGregorianMonth(+date[0], date[1])) {
time = dateTime[1].split(":");
if (time.length === 3) {
value = +time[0];
if (time[0].length === 2 && value >= 0 && value <= 23) {
value = +time[1];
if (time[1].length === 2 && value >= 0 && value <= 59) {
value = +time[2];
if (time[2].length === 2 && value >= 0 && value <= 59) {
dateObject = new Date(Date.UTC.apply(Date, date.concat(time)));
}
}
}
}
}
}
}
}
}
}
if (typeof dateObject === "undefined") {
dateObject = new Date(NaN);
}
return dateObject;
}
function emptyNode(node) {
while (node.firstChild) {
node.removeChild(node.firstChild);
}
}
var countdown = document.getElementById("countdown"),
end = timeStampToDate("2013-10-07 16:57:00"),
intervalId;
end = end.getTime() + end.getTimezoneOffset() * 60000;
function showRemaining() {
var now = new Date().getTime();
if (isNaN(end) || isNaN(now)) {
clearInterval(intervalId);
emptyNode(countdown);
countdown.appendChild(document.createTextNode("Error"));
} else if (now < end) {
emptyNode(countdown);
countdown.appendChild(document.createTextNode(end - now));
} else {
clearInterval(intervalId);
emptyNode(countdown);
countdown.appendChild(document.createTextNode("ITS NOW TIME!"));
}
}
intervalId = setInterval(showRemaining, 1000);
jsFiddle
Related
I have a minute timer which counts from 15 to 0. I don't want to reset (= restart) the timer on page reload. but I can't figure out how to prevent the timer from resetting on a page reload. I'm using javascript with php. I have tried to add the timer time on load to php session but that didn't work for me. any suggestions? thank you :)
function startTimer() {
setTimeout('timer()', 60);
}
var continueMins = localStorage.getItem("continueMins");
var continueSecs = localStorage.getItem("continueSecs");
if (continueMins == 'true') {
mins = continueMins;
} else {
mins = 15;
}
if (continueSecs == 'true') {
secs = continueSecs;
} else {
secs = mins * 60;
}
function timer() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
progressBar = document.getElementById("progressBar");
timerContainer = document.getElementById("timer-container");
expired = document.getElementById("expired");
btcAmount = document.getElementById("btcAmount");
btcAddress = document.getElementById("btcAddress");
window.onbeforeunload = function() {
localStorage.setItem("continueMins", getMinutes());
localStorage.setItem("continueSecs", getSeconds());
}
var totalSeconds = 15 * 60, remainingSeconds = getMinutes() * 60 + getSeconds();
progressBar.style.width = (remainingSeconds * 100 / totalSeconds) + "%";
minutes.innerHTML = getMinutes() < 10 ? "0" + getMinutes() : getMinutes();
seconds.innerHTML = getSeconds() < 10 ? "0" + getSeconds() : getSeconds();
if (mins < 1) {
minutes.classList.add("text-danger");
seconds.classList.add("text-danger");
}
if (mins < 0) {
expired.style.display = 'block';
timerContainer.style.display = 'none';
btcAmount.text = 'Expired';
btcAddress.text = 'Payment Window Expired';
localStorage.removeItem("continueMins");
localStorage.removeItem("continueSecs");
} else {
secs--;
setTimeout('timer()', 1000);
}
}
}
function getMinutes() {
mins = Math.floor(secs / 60);
return mins;
}
function getSeconds() {
return secs - Math.round(mins * 60);
}
startTimer();
<p class="font-18 font-500"><span id="minutes"></span> : <span id="seconds"></span></p>
You could use the localStorage (sessionStorage is also an option but more prone to restart your timer if the user e.g. reconnects in a new tab or restarts the browser)
How to do it to be on the save side (crashes, unexpected bahaviour e.g.you should update the elapsed time in your local storage from time to time. The "normal" situations are handled by checking for the respective event:
var aTimer, bool;
window.onbeforeunload = function (e) {
if (bool) return;
aTimer = setTimeout(function () {
bool = true;
localStorage.setItem("resetTimer", "false");
localStorage.setItem("currentTimer", MY_TIMER_VAR);
localStorage.setItem("sessionDate", MY_NEW_SESSION_VAR);
}, 500);
return ;
};
EDIT If you want that an elapsed timer is valid for lets say 24 hours you have also to place MY_NEW_SESSION_VAR which is a Date.now() converted in hours when reloading you check against TODAY_DATETIME_IN_HOURS which is a Date.now() converted in hours (This was my use case, if you do not need it just leave it out)
The keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings).
When starting your program (loading js) you should check for the vars with:
var resetTimer = localStorage.getItem("resetTimer");
var sessionDate = localStorage.getItem("sessionDate");
if (resetTimer == "true" || sessionDate > (TODAY_DATETIME_IN_HOURS - 24) ){ // start timer }
To delete a single item
localStorage.removeItem("sessionDate");
If you want to use sessionStorage just replace localStorage with sessionStorage
EDIT full code for the OP tested and working as asked
var countDownTarget;
if (document.readyState!="loading") docReady();
/* Modern browsers */
else document.addEventListener("DOMContentLoaded", docReady);
function docReady() {
countDownTarget = parseInt(localStorage.getItem("countDownTarget"));
console.debug("Initvalue: " + countDownTarget);
if (isNaN(countDownTarget) == true || countDownTarget == "" || countDownTarget <= 0){ // If not defined
countDownTarget = new Date().getTime() + 15 * 60 * 1000;
console.debug("is NaN sInitvalue: " + countDownTarget);
//Update the count down every 1 second
setInterval(countDown, 1000);
} else {
console.debug("else Initvalue: " + countDownTarget);
setInterval(countDown, 1000);
}
}
window.onbeforeunload = function() {
localStorage.setItem("countDownTarget", countDownTarget);
};
// Functions you call
function countDown(){
var now = new Date().getTime();
//console.debug("now " + now);
var distance = countDownTarget - now;
console.debug("distance " + distance);
var mins = distance < 0 ? 0 : Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var secs = distance < 0 ? 0 : Math.floor((distance % (1000 * 60)) / 1000);
/** Add a zero in front of numbers<10 */
mins = prependZero(mins);
secs = prependZero(secs);
// Output the results
document.getElementById("minutes").innerHTML = mins;
document.getElementById("seconds").innerHTML = secs;
if (distance <= 0) {
// clearInterval(x);
localStorage.removeItem("countDownTarget");
clearInterval(countDown);
}
}
function prependZero(i){
if (i < 10) {
i = "0" + i;
}
return i;
}
Copy between your script tags or load as *.js file
I am really struggling to solve human readable duration format algorithm. I have solved the most of it, but there are some mistakes anyway which I cannot solve for a while. Some tests pass, while others don't. Please help me it solve it.
The code
function formatDuration (seconds) {
// Complete this function
var minutes = Math.round(seconds / 60);
var thisSeconds = Math.round(seconds % 60);
var hours = Math.round(seconds / 3600);
var days = Math.round(seconds / 86400);
var years = Math.round(seconds / 31536000);
var stringYear = "year";
var stringDay = "day";
var stringHour = "hour";
var stringMinute = "minute";
var stringSecond = "second";
if (years > 1) {
stringYear = "years";
} else if (days > 1) {
stringDay = "days";
} else if (hours > 1) {
stringHour = "hours";
} else if (thisSeconds > 1) {
stringSecond = "seconds";
} else if (minutes > 1) {
stringMinute = "minutes";
}
if (minutes >= 60) {
hours = Math.round(minutes/60);
minutes = Math.abs(minutes - hours*60);
if (minutes > 1) {
stringMinute = "minutes";
}
}
if (hours >= 24) {
days = Math.round(hours/24);
if (days > 1) {
stringDay = "days";
}
hours = hours - days*24;
stringHour = "hours";
}
if (days > 365) {
days = Math.abs(days - years*365);
stringDay = "days";
}
var obj = new Map();
obj.set(stringYear, years);
obj.set(stringDay, days);
obj.set(stringHour, hours);
obj.set(stringMinute, minutes);
obj.set(stringSecond, thisSeconds);
var empArr = [];
obj.forEach(function (value, key, mapObj) {
if (value == 0) {
obj.delete(key);
}
var res = value + " " + key;
if (value > 0) {
empArr.push(res);
formatStrings(empArr);
}
});
return formatStrings(empArr);
}
function formatStrings(arr) {
return arr.length == 1 ? arr[0] : arr.slice(0, arr.length - 1).join(", ") + " and " + arr[arr.length - 1];
//console.log(str);
}
formatDuration(3600);
Test results
Math.round performs rounding (rounding up if the value would be above .5).
use Math.floor everywhere to take the truncated part.
I would also use modulo to avoid all the complicated logic you've added.
So
var minutes = Math.round(seconds / 60);
would become
var minutes = Math.floor(seconds / 60) % 60;
and so on.
When I convert number of seconds 165 to time format like 02:45 I got wrong answer 1 hour plus in hour part 3:45.
I don't know where is actual problem is.
console.log(ConvertStringToTimeFormat(165));
function ConvertStringToTimeFormat(timeString) {
var timeFormat = "";
if (timeString != null && timeString != null != "") {
if (Math.round((parseInt(timeString) / 60)) > 0)
timeFormat += Math.round((parseInt(timeString) / 60)) + ":";
else
timeFormat += "00:";
if ((parseInt(timeString) % 60) > 0)
timeFormat += (parseInt(timeString) % 60);
else
timeFormat += "00";
}
else {
timeFormat = "00:00";
}
return timeFormat;
}
And also when number of seconds is 125 then I got 2:5 as answer but I need 02:05
Thanks in advance.
You could use an array for the parts and get the padded strings and join the result with :.
function convert(min) {
return [Math.floor(min / 60), min % 60].map(function (a) { return ('00' + a).slice(-2); }).join(':');
}
console.log(convert(165));
ES6
function convert(min) {
return [Math.floor(min / 60), min % 60].map(a => ('00' + a).slice(-2)).join(':');
}
console.log(convert(165));
As you're using Math.round function, you should know that your value will be rounded to up if the decimals are greater than or equal to 5.
Let's simulate it:
165/60 = 2,75
It will round to up: 3!
Use Math.floor instead and your problem's solved.
console.log(ConvertStringToTimeFormat(165));
function ConvertStringToTimeFormat(timeString) {
var timeFormat = "";
if (timeString != null && timeString != null != "") {
if (Math.floor((parseInt(timeString) / 60)) > 0)
timeFormat += Math.floor((parseInt(timeString) / 60)) + ":";
else
timeFormat += "00:";
if ((parseInt(timeString) % 60) > 0)
timeFormat += (parseInt(timeString) % 60);
else
timeFormat += "00";
}
else {
timeFormat = "00:00";
}
return timeFormat;
}
Where you're using Math.round(), it's rounding up 2.75 to 3. You should use Math.floor() instead.
console.log(ConvertStringToTimeFormat(165));
function ConvertStringToTimeFormat(timeString) {
var timeFormat = "";
if (timeString != null && timeString != null != "") {
if (Math.floor((parseInt(timeString) / 60)) > 0)
timeFormat += Math.floor((parseInt(timeString) / 60)) + ":";
else
timeFormat += "00:";
if ((parseInt(timeString) % 60) > 0)
timeFormat += (parseInt(timeString) % 60);
else
timeFormat += "00";
}
else {
timeFormat = "00:00";
}
return timeFormat;
}
Use Math.floor instead of Math.round because 165/60 in Math.round is 3 but you want 2. So, Make use of Math.floor to find previous integer value.
console.log(ConvertStringToTimeFormat(165));
function ConvertStringToTimeFormat(timeString) {
var timeFormat = "";
if (timeString != null && timeString != null && timeString!= "") {
if (Math.round((parseInt(timeString) / 60)) > 0)
timeFormat += Math.floor((parseInt(timeString) / 60)) + ":";
else
timeFormat += "00:";
if ((parseInt(timeString) % 60) > 0)
timeFormat += (parseInt(timeString) % 60);
else
timeFormat += "00";
}
else {
timeFormat = "00:00";
}
return timeFormat;
}
You need Math.floor rather than Math.round, the later returns The value of the given number rounded to the nearest integer.
And for the format problem, try the following code:
console.log(ConvertStringToTimeFormat(125));
function formatHourOrMinute(hom) {
return ("0" + hom).slice( - 2);
}
function ConvertStringToTimeFormat(timeString) {
if (timeString) {
var timeInt = parseInt(timeString);
var hour = Math.floor(timeInt / 60);
var minute = timeInt % 60;
return formatHourOrMinute(hour) + ":" + formatHourOrMinute(minute);
} else {
return "00:00";
}
}
I rewrote your code using skinning a bit:
const ConvertStringToTimeFormat = (minutes) => ("00" + Math.floor(minutes / 60)).slice(-2) +":"+ ("00" + (minutes % 60)).slice(-2)
console.log(ConvertStringToTimeFormat(165))
Try this code. You have a lot of unnecessary code there:
function minutesToHours(min) {
var minutes = min % 60;
var hours = (min-minutes)/60;
minutes = minutes < 10 ? '0' + minutes : minutes;
hours = hours < 10 ? '0' + hours : hours;
return hours+':'+minutes;
}
console.log(minutesToHours(165));
Hi I've been trying to take and work with some code that I can get partially working, I want a countdown that we can set an end time it counts down to (obvious is obvious out of the way), we also want to set it to show at only certain times of the day and only certain days of the week.
I've managed to get the below working so we can set a time of the day to show but I can't get it to work so it only shows on the certain specified days. Can anyone help please?
var countdownMessage = "This ends in";
var now = new Date();
var time = now.getTime(); // time now in milliseconds
var countdownEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 12, 59); // countdownEnd 0000 hrs
//////////////////////////* Countdown *///////////////////////////////
function getSeconds() {
var ft = countdownEnd.getTime() + 86400000; // add one day
var diff = ft - time;
diff = parseInt(diff / 1000);
if (diff > 86400) {
diff = diff - 86400
}
startTimer(diff);
}
var timeInSecs;
var ticker;
function startTimer(secs) {
timeInSecs = parseInt(secs);
ticker = setInterval("tick()", 1000);
tick(); // to start counter display right away
}
function tick() {
var secs = timeInSecs;
if (secs > 0) {
timeInSecs--;
} else {
clearInterval(ticker); // stop counting at zero
//getSeconds(); // and start again if required
}
var hours = Math.floor(secs / 3600);
secs %= 3600;
var mins = Math.floor(secs / 60);
secs %= 60;
var result = ((hours < 10) ? "0" : "") + hours + " hours " + ((mins < 10) ? "0" : "") + mins + " minutes " + ((secs < 10) ? "0" : "") + secs + " seconds";
document.getElementById("countdown").innerHTML = (countdownMessage) + " " + result;
}
///////////////* Display at certain time of the day *//////////////////
//gets the current time.
var d = new Date();
if (d.getHours() >= 7 && d.getHours() <= 15) {
$("#countdown").show();
} else {
$("#countdown").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body onload="getSeconds()">
<span id="countdown" style="font-weight: bold;"></span>
</body>
[EDIT]
Just to add to this I tried changing part of the script to this but it didn't work:
$(function() {
$("#countdown").datepicker(
{ beforeShowDay: function(day) {
var day = day.getDay();
if (day == 1 || day == 2) {
//gets the current time.
var d = new Date();
if(d.getHours() >= 7 && d.getHours() <= 10 ){
$("#countdown").show();
}
else {
$("#countdown").hide();
}
} else {
$("#countdown").hide();
}
}
});
});
Whatever you did is all good except the setInterval part where you are passing the string value as setInterval("tick()", 1000) instead of a function reference as setInterval(tick, 1000)
Also, I have updated the code as below to check the specific day along with specific hours which you had,
var d = new Date();
var day = d.getDay();
if (day == 0 || day == 6) {
if (d.getHours() >= 0 && d.getHours() <= 8) {
$("#countdown").show();
} else {
$("#countdown").hide();
}
}
You can give a try below,
var countdownMessage = "This ends in";
var now = new Date();
var time = now.getTime(); // time now in milliseconds
var countdownEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 12, 59); // countdownEnd 0000 hrs
//////////////////////////* Countdown *///////////////////////////////
function getSeconds() {
var ft = countdownEnd.getTime() + 86400000; // add one day
var diff = ft - time;
diff = parseInt(diff / 1000);
if (diff > 86400) {
diff = diff - 86400
}
startTimer(diff);
}
var timeInSecs;
var ticker;
function startTimer(secs) {
timeInSecs = parseInt(secs);
ticker = setInterval(tick, 1000);
tick(); // to start counter display right away
}
function tick() {
var secs = timeInSecs;
if (secs > 0) {
timeInSecs--;
} else {
clearInterval(ticker); // stop counting at zero
//getSeconds(); // and start again if required
}
var hours = Math.floor(secs / 3600);
secs %= 3600;
var mins = Math.floor(secs / 60);
secs %= 60;
var result = ((hours < 10) ? "0" : "") + hours + " hours " + ((mins < 10) ? "0" : "") + mins + " minutes " + ((secs < 10) ? "0" : "") + secs + " seconds";
document.getElementById("countdown").innerHTML = (countdownMessage) + " " + result;
}
$("#countdown").hide();
///////////////* Display at certain time of the day *//////////////////
//gets the current time.
var d = new Date();
var day = d.getDay();
if (day == 0 || day == 6) {
if (d.getHours() >= 0 && d.getHours() <= 8) {
$("#countdown").show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body onload="getSeconds()">
<span id="countdown" style="font-weight: bold;"></span>
</body>
I have a Javascript countdown from 12am to 9pm each day and then resets itself.
I want the countdown to go from 8am-9pm instead of 12am-9pm. I have been fiddling with this but I can't seem to make it work with a start time other than the defaulted 12am.
My question is how can I make the countdown from 8-21 hours instead of 0-21 hours?
Javascript:
if (document.getElementById('countdown')) {
pad = function(n, len) { // leading 0's
var s = n.toString();
return (new Array( (len - s.length + 1) ).join('0')) + s;
};
function countDown(){
var now = new Date();
if ( (now.getDay() >= 1) && (now.getDay() <= 7) ) { // Monday to Sunday
var target = 21; // 21:00hrs is the cut-off point
if (now.getHours() < target) { //
var hrs = (target - 1) - now.getHours();
if (hrs < 0) hrs = 0;
var mins = 59 - now.getMinutes();
if (mins < 0) mins = 0;
var secs = 59 - now.getSeconds();
if (secs < 0) secs = 0;
var str = pad(hrs, 2) + ':' + pad(mins, 2) + '.<small>' + pad(secs, 2) + '</small>';
document.getElementById('countdown').innerHTML = str;
}
else
$('.wereOpen').hide();
}
}
var timerRunning = setInterval('countDown()', 1000);
}
Website
I don't fully understand your question, but could you just add now.getHours() >= 7 to your if statement, i.e.
...
if (now.getHours() >= 7 && now.getHours() < target) {
...
} else {
$('.wereOpen').hide();
}
...
EDIT
In light of the comment, the following should work:
if (document.getElementById('countdown')) {
pad = function(n, len) { // leading 0's
var s = n.toString();
return (new Array( (len - s.length + 1) ).join('0')) + s;
};
function countDown(){
var now = new Date();
if ( (now.getDay() >= 1) && (now.getDay() <= 7) ) { // Monday to Sunday
var target = 21; // 21:00hrs is the cut-off point
var hours = now.getHours(); //get hours
if(hours < 8 || hours >= target) {
$('.wereOpen').hide();
return;
} else
$('.wereOpen').show();
var hrs = (target - 1) - hours;
if (hrs < 0) hrs = 0;
var mins = 59 - now.getMinutes();
if (mins < 0) mins = 0;
var secs = 59 - now.getSeconds();
if (secs < 0) secs = 0;
var str = pad(hrs, 2) + ':' + pad(mins, 2) + '.<small>' + pad(secs, 2) + '</small>';
document.getElementById('countdown').innerHTML = str;
}
}
var timerRunning = setInterval('countDown()', 1000);
}