Develop Reference

Create date object that is same for everyone from same timestamp

On my site I am getting the current time via ajax function that returns the servers current timestamp and then creating a date object.
$.post(flipCountdownObj.ajax_url, data, function(response) {
var currentTime = new Date(parseInt(response) * 1000);
alert("Server says the time is " + currentTime.toLocaleTimeString());
// code to create my countdown here...
}
My logic then goes on to compare that date to various other dates to provide countdowns and event status.
My problem is though that everyone is getting different times.
I am in GMT. The server is in EST. For me it says the correct time but people in EST are saying that it is 4 hours out.
I don't understand why this is happening as the timestamp should be the same for everyone.
I saw a post saying about setting UTC time but not sure exactly what I am meant to do. Can anyone shed some light on what I am doing wrong?

This seems to work:
var serverOffset = -300*60000; // -5 hrs is 300 minutes
var usersDate = new Date();
var userOffset = usersDate.getTimezoneOffset()* 60000;
var currentTime = new Date((parseInt(response) * 1000) + userOffset + serverOffset);

Is it possible to call setInterval based on time based?

I am displaying live news in my website and for that to get the latest data i am using setInterval for every 9 minutes as shown below
$(document).ready(function() {
displaylivenews();
setInterval(displaylivenews, 540000);
});
function displaylivenews() {
alert('calling ajax to getting latest data ');
}
All this works fine , my question is that , if the time is in between 7 Am to 9 AM , i want to call it more frequently that is for every 5 minutes ??
Is it possible to call setInterval based on time based ??
http://jsfiddle.net/mwv6r0df/

Answering your question, you can do the following:
function getRefreshPeriod()
{
var hour = new Date().getHours();
return (hour >= 7 && hour < 9) ? 300000 : 540000;
}
function displaylivenews() {
alert('calling ajax to getting latest data ');
setTimeout(displaylivenews, getRefreshPeriod());
}
setTimeout(displaylivenews, getRefreshPeriod());
I used setTimeout in order to correctly handle "border" cases.
For example, if a user opens a page at 08:46 AM, he will get updates at 08:51 (5 minutes later), 08:56, 09:01, 09:10 (9 minutes later, because it is not a "prime time" anymore).
However, keep in mind that setInterval and setTimeout do not guarantee to be precise. It is a better idea to calculate the time of next updating, and rely on it.
Another important note: new Date() will return the client's local time. So, actually, news will be updated more frequently between 7AM and 9AM of local time. If you have users from different time zones and want them to receive news more frequently between 7AM and 9AM in your time zone, then you may want to use getUTCHours.
For example, I am located in GMT+6 time zone, and if I had this website, it would be:
var hour = new Date().getUTCHours();
return (hour >= 1 && hour < 3) ? 300000 : 540000;
because 1AM and 3AM UTC are 7 AM and 9AM in UTC+6.

javascript - time counter since start date and time

I have a new business, where I just hired someone to work for me, I am trying to make it easy for her to track her time, so I created a clock in button, that creates a record in a database, I have it pop up a small window, that she can click to clockout when she is done working.
I want it to show her on that popup window a counter that will show how long she has been working, so I want to create a javascript or jQuery that will start at a certain time and count from there. She is on the East Coast, our company is in the Central Timezone, so 1 hour behind her.
How can I get a javascript to start from a certain time and keep updating the timer, so she can see something like this:
[You've been working for: 01:01:01 HH::MM::SS] - and it is actively updating, climbing up.
All the timers I've found are not about time itself, but about starting at a time and counting down, or starting at 0 and counting up.
Is there a way to tell it a start time, so that way if she reloads the page, it does not start from 0, but will start at the time she clocked in, then add the time since and start from there?
I know it can be done, but I'm more of a Perl guy than a Javascript guy. I'm doing this on Wordpress, so I could use PHP and just tell her to refresh the page to see the current amount of time and then have it on page load show the current amount of time, but I think having a counter would be better and make it easier for her.
is there some code already done that I could modify myself to make it work? I cannot find any, anywhere. I'm willing to do all the work, I'm not asking for someone to do it for me.
I found this example someone did:
function get_uptime() {
var t1 = new Date()
var t2 = new Date()
var dif = t1.getTime() - t2.getTime()
seconds = dif / 1000;
Seconds_Between_Dates = Math.abs(seconds);
document.getElementById("seconds").innerHTML = Seconds_Between_Dates;
setTimeout(get_uptime, 1000);
}
get_uptime();
That is sort of it, but I don't now how to put the first time in t1, what format do I put it in?
I can have PHP put it in any format, but not sure the one it needs.
Plus this appears to only put the seconds, not hours, minutes and seconds.
Is there away to do that?
Thanks,
Richard

From your question I understand you store the date and time on start?
So then you can use PHP to echo this information in a starting Date object and let a setInterval-function do the current timegetting and calculation of the time working.
See working example here: http://jsfiddle.net/c0rxkhyz/1/
This is the code:
var startDateTime = new Date(2014,0,1,23,59,59,0); // YYYY (M-1) D H m s ms (start time and date from DB)
var startStamp = startDateTime.getTime();
var newDate = new Date();
var newStamp = newDate.getTime();
var timer; // for storing the interval (to stop or pause later if needed)
function updateClock() {
newDate = new Date();
newStamp = newDate.getTime();
var diff = Math.round((newStamp-startStamp)/1000);
var d = Math.floor(diff/(24*60*60)); /* though I hope she won't be working for consecutive days :) */
diff = diff-(d*24*60*60);
var h = Math.floor(diff/(60*60));
diff = diff-(h*60*60);
var m = Math.floor(diff/(60));
diff = diff-(m*60);
var s = diff;
document.getElementById("time-elapsed").innerHTML = d+" day(s), "+h+" hour(s), "+m+" minute(s), "+s+" second(s) working";
}
timer = setInterval(updateClock, 1000);
<div id="time-elapsed"></div>
Attention! The month number in the new Date() declaration is minus one (so January is 0, Feb 1, etc)!

I would use momentJS fromNow function.
You can get the time started as variable on page load then call fromNow on that and current time to get time between the two every time the clock is clicked:
var StartedWorkDateTime = GetStartedTime();
moment(StartedWorkDateTime).fromNow(true);
Non momentJS:
var date1 = new Date("7/11/2010 15:00");
var date2 = new Date("7/11/2010 18:00");
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffHours = Math.ceil(timeDiff / (1000 * 3600));
alert(diffHours);
reference

Get the difference between two dates by subtracting them:
var duration = end - start;
This will give you the number of milliseconds between the dates. You can use the milliseconds to figure out hours, minutes, and seconds. Then it's just a matter of string manipulation and writing the value to the page. To update the timer once per second, use setInterval():
setInterval(writeDuration, 1000);

Run JS function every new minute

So I've got this JavaScript clock I'm working on and I want it to be perfectly synced with the clients' system clock. I know how to get the current time using a Date object and I know how to run the update function every 60000 milliseconds (1 minute). The thing is that the client might load the page when half a minute has already passed, making the clock lag behind with 30 seconds. Is there any way to just run the update function when the minute-variable actually changes? (I only want minute-precision.)
How I get the current time:
var time = new Date();
var currentHour = time.getHours();
var currentMinute = time.getMinutes();
How I run the update function every 60000 ms:
setInterval(update,60000); //"update" is the function that is run

When the user logs in, get the current time and seconds of the minute, subtract 60 to get the remaining seconds, then multiply to set the timer
var time = new Date(),
secondsRemaining = (60 - time.getSeconds()) * 1000;
setTimeout(function() {
setInterval(update, 60000);
}, secondsRemaining);

First, you have to understand that timers in javascript are not guaranteed to be called on time so therefore you cannot be perfectly synced at all times - javascript just isn't a real-time language like that. It is single threaded so a timer event has to wait for other javascript that might be executing at the time to finish before a timer can be executed. So, you must have a design that still does as best as possible even if the timer is delayed (called later than it's supposed to be).
If you wanted to try to stay as close to aligned and do the fewest screen updates and be the most friendly to mobile battery life, I'd suggest this self-aligning code which realigns itself on each tick based on the time remaining until the next minute change:
function runClock() {
var now = new Date();
var timeToNextTick = (60 - now.getSeconds()) * 1000 - now.getMilliseconds();
setTimeout(function() {
update();
runClock();
}, timeToNextTick);
}
// display the initial clock
update();
// start the running clock display that will update right on the minute change
runClock();
This has the advantage that it only calls the update once on the next minute boundary.
Working demo: http://jsfiddle.net/jfriend00/u7Hc5/

var time = new Date();
var currentHour = time.getHours();
var currentMinute = time.getMinutes();
var currentSecond = time.getSeconds();
var updateinterval = setInterval(startTimer,(60-currentSecond)*1000);
function startTimer(){
clearInterval(updateinterval);
setInterval(update,60000);
}
function update(){
var time = new Date();
console.log(time.getSeconds());
}

I would set an interval to run each second, then check if time.getSeconds() == 0. This way you could execute an action whenever a new minute starts, based on the client time.

Open Modal in a specific date/time [duplicate]

This question already has answers here:
Call a javascript function at a specific time of day
(4 answers)
Closed 9 years ago.
I've been developing a web app, and I was wondering if there is a way to display a model at a specific date/time.
In the app, the user can book task or reminders, so when I read from the database the task a specific I want to schedule the display of the modal at the date/time specify by the user.
For instance, the user book a task for 2013-09-23 at 14:00 and I want to display a message in the modal.
I kwon we can set time interval with the JavaScript:
setInterval(function () {
showModal();
}, 10 * 1000);
But how to specify an hour like in the sample?

In that setInterval call, 10 * 1000 means 10 times 1000 milliseconds, or in other words 10 seconds. If you want an hour, it's just a bigger number. 1000 * 60 * 60 is an hour.
However, setInterval is for running a function multiple times. Unless you wanted it to be called every hour, you are probably looking for setTimeout instead. setTimeout schedules a function to be run once after the time period expires.

You can try like this.
Make your setInterval() to run for a continues time.
Compare the date, by converting them to milliseconds. and a comparison condition.
setInterval(function () {
var date = new Date("2013-09-23 14:00");
var schDateSecs = Date.parse(date);
var currentDate = new Date();
var schCurrentSecs = Date.parse(currentDate);
if (schDateSecs == schCurrentSecs) {
//execute
showModal();
}
}, 10 * 1000);

Thank you all for your answers, they help me come up with a solution:
function setNotification(notificationDate, notificationCallback){
var currentDate = new Date();
var date = new Date(notificationDate);
var interval = date - currentDate;
if(interval > 0)
window.setTimeout(function(){ notificationCallback(item)}, interval); //notificationCallback = showModal()
}