Develop Reference

My JavaScript clock widget crashes Firefox

I am a JavaScript noob and realise that I need assistance.
All I want is to show a simple real-time clock with the time and AM/PM in separate SPANs.
The issue is that if I keep the tab open for 20-40 minutes (varies depending on how many other tabs I have open), it crashes the tab with an out of memory error. I have only tested this on Firefox (72.0.2) for now.
Why is my code so awfully memory intensive? It usually starts at around 2.4MB and then gradually increases and exceeds 42MB, then drops again, increases again and repeats the cycle several times until the tab crashes.
I've read aboout Garbage Collection but have no idea about how it works or if it's related to this problem.
Note that I've tried swapping setInterval with setTimeout but it's the same result.
This is my JavaScript:
window.onload = function() {
clock();
function clock() {
var now = new Date();
var TwentyFourHour = now.getHours();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var mid = 'PM';
if (min < 10) {
min = "0" + min;
}
if (hour > 12) {
hour = hour - 12;
}
if (hour == 0) {
hour = 12;
}
if (TwentyFourHour < 12) {
mid = 'AM';
}
document.getElementById('time-core').innerHTML = hour + ':' + min;
setInterval(clock, 1000);
document.getElementById('time-suffix').innerHTML = mid;
setInterval(clock, 1000);
}
}
And this is my HTML:
<span class="show-time" id="time-core"></span><span class="show-time-suffix" id="time-suffix"></span>
Thank you!

As Andreas said in his comment:
Every call of clock() adds two new intervals that each will call clock(). So after the first round we then have two scheduled clock() calls, then 4, then 8, then ...
One way to solve that would be to remove the setInterval from inside the clock function, like the example below.
window.onload = function() {
clock(); // Run it first so we don't have to wait 1 second
setInterval(clock, 1000); // Updates the clock every second
function clock() {
var now = new Date();
var TwentyFourHour = now.getHours();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var mid = 'PM';
if (min < 10) {
min = "0" + min;
}
if (hour > 12) {
hour = hour - 12;
}
if (hour == 0) {
hour = 12;
}
if (TwentyFourHour < 12) {
mid = 'AM';
}
document.getElementById('time-core').innerHTML = hour + ':' + min;
document.getElementById('time-suffix').innerHTML = mid;
}
}

Time Zone Countdown script, not working as intended?

I was on the lookout for a javascript countdown with adjustable timezones, and found this script called tzcount.js. According to the instructions:
The month can be specified as a number between 1 and 12 to indicate
which month of the year that you are counting down to (it will assume
next year if the month has already past for this year)
But when I enter the value 1 for month, the script tells me that the date has passed, instead of assuming it is the first month of the next year. Am I missing something or is this script not working as intended?
The full script:
<!--Copy and paste just above the close </BODY> of you HTML webpage.-->
<SCRIPT type="text/javascript">
// **** Time Zone Count Down Javascript **** //
/*
Visit http://rainbow.arch.scriptmania.com/scripts/
for this script and many more
*/
////////// CONFIGURE THE COUNTDOWN SCRIPT HERE //////////////////
var month = '*'; // '*' for next month, '0' for this month or 1 through 12 for the month
var day = '1'; // Offset for day of month day or + day
var hour = 0; // 0 through 23 for the hours of the day
var tz = -5; // Offset for your timezone in hours from UTC
var lab = 'tzcd'; // The id of the page entry where the timezone countdown is to show
function start() {displayTZCountDown(setTZCountDown(month,day,hour,tz),lab);}
// ** The start function can be changed if required **
window.onload = start;
////////// DO NOT EDIT PAST THIS LINE //////////////////
function setTZCountDown(month,day,hour,tz)
{
var toDate = new Date();
if (month == '*')toDate.setMonth(toDate.getMonth() + 1);
else if (month > 0)
{
if (month <= toDate.getMonth())toDate.setYear(toDate.getYear() + 1);
toDate.setMonth(month-1);
}
if (day.substr(0,1) == '+')
{var day1 = parseInt(day.substr(1));
toDate.setDate(toDate.getDate()+day1);
}
else{toDate.setDate(day);
}
toDate.setHours(hour);
toDate.setMinutes(0-(tz*60));
toDate.setSeconds(0);
var fromDate = new Date();
fromDate.setMinutes(fromDate.getMinutes() + fromDate.getTimezoneOffset());
var diffDate = new Date(0);
diffDate.setMilliseconds(toDate - fromDate);
return Math.floor(diffDate.valueOf()/1000);
}
function displayTZCountDown(countdown,tzcd)
{
if (countdown < 0) document.getElementById(tzcd).innerHTML = "Sorry, you are too late.";
else {var secs = countdown % 60;
if (secs < 10) secs = '0'+secs;
var countdown1 = (countdown - secs) / 60;
var mins = countdown1 % 60;
if (mins < 10) mins = '0'+mins;
countdown1 = (countdown1 - mins) / 60;
var hours = countdown1 % 24;
var days = (countdown1 - hours) / 24;
document.getElementById(tzcd).innerHTML = days + " day" + (days == 1 ? '' : 's') + ' + ' +hours+ 'h : ' +mins+ 'm : '+secs+'s';
setTimeout('displayTZCountDown('+(countdown-1)+',\''+tzcd+'\');',999);
}
}
</SCRIPT>
<p><font face="arial" size="-2">The countdown script at </font><br><font face="arial, helvetica" size="-2">Rainbow Arch</font></p>
I found the script, and the instructions, here http://rainbow.arch.scriptmania.com/scripts/timezone_countdown.html

The script isn't working right.
You need to edit this line:
if (month <= toDate.getMonth())toDate.setYear(toDate.getYear() + 1);
getYear abbreviates, so it returns 115 for this year. setYear then thinks you mean 115 AD, which passed a long time ago.
Replace setYear and getYear with setFullYear and getFullYear. Those functions will return/expect 2015.

How to get time difference between two timestamps in seconds with jQuery?

I want to display x seconds ago based on a MySQL Timestamp.
I found the plugin called timeago
But I cannot find a way to make it display only seconds.
I'm OK with 61 seconds, or 300 seconds. Any way to convert the output to seconds with timeago, or with pure jQuery / JavaScript ?
Thanks for any help !
Edit:
Sample Case :
$time1 = "2014-02-02 23:54:04"; // plus PHP ways to format it.
//$time2 = NOW() , or date(); whatever.
I just want to get how many seconds since $time1.
Edit 2:
Working code :
<script type="text/javascript">
$(function(){
var d2 = new Date();
var d1 = new Date("2014-02-02 23:54:04");
$("a#timedif").html("Diff. Seconds : "+((d2-d1)/100).toString());
// note that you may want to round the value
});
</script>
It outputs Diff. Seconds : NaN

assuming you parse the string into JavaScript date object, you can do
(date2 - date1)/1000
to parse mysql format timestamp, just feed the string into new Date():
var d2 = new Date('2038-01-19 03:14:07');
var d1 = new Date('2038-01-19 03:10:07');
var seconds = (d2- d1)/1000;
fix of edit 2 in the question:
<script type="text/javascript">
$(function(){
var d2 = new Date();
var d1 = new Date("2014-02-02 23:54:04");
$("a#timedif").html("Diff. Seconds : "+((d2-d1)/1000).toString());
});

If you are okay with that plugin you can modify it a little bit to work with seconds only
var words = seconds < 45 && substitute($l.seconds, Math.round(seconds)) ||
seconds < 90 && substitute($l.minute, 1) ||
minutes < 45 && substitute($l.minutes, Math.round(minutes)) ||
minutes < 90 && substitute($l.hour, 1) ||
hours < 24 && substitute($l.hours, Math.round(hours)) ||
hours < 42 && substitute($l.day, 1) ||
days < 30 && substitute($l.days, Math.round(days)) ||
days < 45 && substitute($l.month, 1) ||
days < 365 && substitute($l.months, Math.round(days / 30)) ||
years < 1.5 && substitute($l.year, 1) ||
substitute($l.years, Math.round(years));
with this part, go only with converting to seconds
see the fiddle: http://jsfiddle.net/zGXLU/1/

jQuery is just a JavaScript library so JavaScript will just work within your jQuery script:
// specified date:
var oneDate = new Date("November 02, 2017 06:00:00");
// number of milliseconds since midnight Jan 1 1970 till specified date
var oneDateMiliseconds = oneDate.getTime();
// number of milliseconds since midnight Jan 1 1970 till now
var currentMiliseconds = Date.now();
// return time difference in milliseconds
var timePassedInMilliseconds = (currentMiliseconds-oneDateMiliseconds)/1000;
alert(timePassedInMilliseconds);

My working with time difference for calculating each value separately
var start = new Date('Mon Jul 30 2018 19:35:35 GMT+0500');
var end = new Date('Mon Jul 30 2018 21:15:00 GMT+0500');
var hrs = end.getHours() - start.getHours();
var min = end.getMinutes() - start.getMinutes();
var sec = end.getSeconds() - start.getSeconds();
var hour_carry = 0;
var minutes_carry = 0;
if(min < 0){
min += 60;
hour_carry += 1;
}
hrs = hrs - hour_carry;
if(sec < 0){
sec += 60;
minutes_carry += 1;
}
min = min - minutes_carry;
console.log("hrs",hrs);
console.log("min",min);
console.log("sec",sec);
console.log(hrs + "hrs " + min +"min " + sec + "sec");

Get difference between two timestamps in
Seconds: (get timestamp by new Date().getTime())
diff_in_time = (timestamp_1 - timestamp2);
In Days:
diff_in_days = parseInt((timestamp_1 - timestamp2) / (1000 * 3600 * 24));

Convert javascript Date() to UTC and offset time

I have a countdown timer on a website (it acts as a same day shipment countdown timer, so the visitor knows if they place an order, it will be shipped out today if they're within the time window.) Basically the timer just counts down monday to friday until 5:00PM and then starts again at "0" (midnight, 24 hour clock) which was all working.
Then I realized that since the time is client side (javascript) visitors on the PST timezone will see a false time compared to what they should see (the store is Eastern).
Unfortunately I can't use php or anything server side to get the time from the server, so it has to be javascript (convert to UTC and offset).
I'm doing something wrong with the variables as far as I can tell, possibly more, could someone please tell me what I'm exactly setting wrong? (it doesn't show any errors in my console).
if (document.getElementById('countdownTimer')) {
pad = function(n, len) { // leading 0's
var s = n.toString();
return (new Array( (len - s.length + 1) ).join('0')) + s;
};
function calcTime(offset) {
// create Date object for current location
var d = new Date();
// convert to msec
// add local time zone offset
// get UTC time in msec
utc = d.getTime() + (d.getTimezoneOffset() * 60000);
offset = -5.0;
var now = utc + (3600000*offset);
function countDown() {
//var now = new Date();
if ( (now.getDay() >= 1) && (now.getDay() <= 5) ) { // Monday to Friday only
var target = 17; // 15:00hrs is the cut-off point
if (now.getHours() < target) { // don't do anything if we're past the cut-off point
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 = '<span id="day">00</span><span id="hour">' + pad(hrs, 2) + '</span><span id="minute">' + pad(mins, 2) + '</span><span id="second">' + pad(secs, 2) + '</span>';
document.getElementById('countdownTimer').innerHTML = str;
}
}
}
var timerRunning = setInterval('countDown()', 1000);
}
}

I see that in these lines :
// convert to msec
// add local time zone offset
// get UTC time in msec
utc = d.getTime() + (d.getTimezoneOffset() * 60000);
offset = -5.0;
var now = utc + (3600000*offset);
you're creating a now variable as a number, and then in your function countDown() you're using it as a date object.
You should create your now var as a date like this
var now = new Date(utc + (3600000*offset));

I just did this to set an expires header in node.js ... here's what I did:
res.setHeader("Expires", new Date(Date.now() + 345600000).toUTCString());
for another application you could do it differently:
var updated_date = new Date(Date.now() + 345600000, //miliseconds
utc_date = updated_date.toUTCString()
Have fun!

Javascript Countdown with PHP

I want to have a countdown associated with a particular button on my PHP page and i am using following code based on javascript
But,it resets the target value on page reload,so how to have the same without the target value getting reset.Can i do something with session ??
<html>
<body>
<p>Time remaining: <span id="countdownTimer"><span>00:00.<small>00</small></span></p>
<script type="text/javascript">
if (document.getElementById('countdownTimer')) {
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() >= 0) && (now.getDay() <= 6) ) { // Monday to Friday only
var target = 23; // 15:00hrs is the cut-off point
if (now.getHours() < target) { // don't do anything if we're past the cut-off point
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('countdownTimer').innerHTML = str;
}
}
}
var timerRunning = setInterval('countDown()', 1000);
}
</script>
</body>
</html>

Instead of evaluating your variable 'now' as such:
var now = new Date();
Evaluate it like this (assuming our browser supports LocalStorage):
if (!localStorage.myDate)
localStorage.myDate = (new Date()).toString();
var now = new Date(localStorage.myDate);
This way, we only ever evaluate the current date on first load. After that, we refer to a serialized string version of that date and pass that as an argument when we create our 'now' variable.
If we want to support older browser (cough IE), we can use userData or simply do something very similar with cookies.

So essentially, you want to capture 'now' once, and not have that change, correct?
function getNow(){ //call this rather than use var now = new Date();
if (window.localStorage){
if (!localStorage.now){
localStorage.now = new Date();
}
return localStorage.now;
}else{
return new Date();
}
}
Pardon if I've got a bit of syntax out (I'm not sure if you'd have to convert a date to store it in localStorage), but that's the gist of it. For IE7 and below support you'd need to use cookies, but the concept remains the same.
Also, I think you have a mistake in:
if ( (now.getDay() >= 0) && (now.getDay() <= 6) )
That will always be true, try:
if ( (now.getDay() > 0) && (now.getDay() < 6) )