Implementing html+js clock timer (jsfiddle sample) and I found problem when changing operating system time backward and then forward.
Lets have this html:
<div id="time">-</div>
And JS code:
var time = document.getElementById('time');
function iteration() {
time.innerHTML = new Date().toString();
}
setInterval(iteration, 100);
Lets say you started page at 2:22PM. Label display correct time.
Now change operating system local time backward 1 hour to 1:22PM, now JS new Date() correctly returns changed time 1:22PM.
Next change operating system local time forward to actual date - 2:22PM, and now JS new Date() does not return 2:22PM but old 1:22PM. So it seems to me that it does not handle correctly changes to local system time (forward only?).
Seems to be problem only in Google Chrome (37.0.2062.124 m (64-bit)).
In Internet Explorer and Firefox, JS new Date() return correct value.
Update: Does anyone know how to 'fix' this for Google chrome using JS code?
Related
I realized that a change in system time is not immediately reflected in javascript, event if I use a new Date object. It is only updated every minute.
var fakeElapsed = 0;
$(document).ready(function(){
var oldTime = 0;
function fakeTimeLoop(time){
fakeElapsed+=(time-oldTime);
oldTime = time;
$("div").html(fakeElapsed);
}
var clock = new Date();
var start = clock.getTime();
oldTime = clock.getTime();
setInterval(function(){
var clock2 = new Date();
var end = clock2.getTime();
var elapsed = end-start;
if(elapsed%5===0){
fakeTimeLoop(end);
}},
1
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div></div>
</body>
Time code, if you would turn time forward (or backwards), it takes a minute to change the time elapsed.
Is there anyway to update to the system time every second?
Edit: for those who are confused, a change in system is not reflected immediately on Chrome and Opera, but on IE and Mozzila, it is immediately reflected, I assume its order to avoid expensive system calls every time it needs to build a new Date object.
What I am looking for: is that anyway to get the current system time in chrome/opera or detect a change in system time immediately?
It's not exactly clear to me what you're trying to accomplish, but your setInterval is programmed to execute every millisecond (the second parameter is in milliseconds), but browsers treat any value less than 10 as equal to 10. Even with that restriction, the timing isn't guaranteed to be exact, so the function may well execute every 11, 12, 13, etc. milliseconds.
When you change your computer date/time and refresh the web page, new Date() will not return correct date/time. After 20-25 seconds it will return correct time. Probably it is a browsers' bug (I tested on Windows 10, Edge an Chrome).
I could not find any document in relation to what I am trying to solve, hence I am asking it here.
My controller pulls a Carbon Date using this:
$utctime = Carbon::now()->toTimeString();
That code allows me to display the UTC time on my page. The problem comes in the fact that Carbon only loads the time once (on page load) and it stays at that time. What I want is to Carbon to display the real-time and not require the page to reload.
I am guessing it might not be possible the update the time, as Carbon is not front-end? If so, how would you go about making the time update every second instead of it not updating at all? - Maybe there is something for the front-end that I can use?
Adding a basic ticking clock in Javascript is fairly straightforward:
<div id="time"></div>
<script type="text/javascript">
function showTime() {
var date = new Date(),
utc = new Date(Date.UTC(
date.getFullYear(),
date.getMonth(),
date.getDate(),
date.getHours(),
date.getMinutes(),
date.getSeconds()
));
document.getElementById('time').innerHTML = utc.toLocaleTimeString();
}
setInterval(showTime, 1000);
</script>
This would be entirely front-end based, and ensure there isn't a "jump" between the initially rendered server-time and the user's local time.
You can use moment.js, you can also define the timezone or display UTC time
moment.utc().format();
https://momentjs.com/docs/
https://momentjs.com/timezone/docs/
I am developing a simple extension where I would like to have two buttons (one being "Reduce Time" and other being "Reset Time").
I have created the manifest.json and other necessary files, including the html that contains the two buttons.
How should I code in the .js file so that I can achieve the following functionality:
On clicking the "Reduce Time", the system time should go back 10
mins
On clicking the "Reset Time", the system time should revert
back to original time.
My .js so far is thus:
var globalCount = 0;
function reduceTime(){
var d = new Date();
d.setTime(d.getTime()-600000);
globalCount = globalCount + 1;
}
function resetTime(){
var d = new Date();
if(globalCount > 0)
{
d.setTime(d.getTime() + (600000*globalCount));
}
}
But when I run the extension, and click on the "Reduce Time" button, I believe nothing happens as the date in the taskbar still shows the same value. Am I missing something?
The code is doing what you're asking it to do. If you include a log statement after either of the setTime() calls, you'll find that d is indeed changed, just as setTime() is advertised to do. Read more about setTime().
The code cannot do what you want it to do. JavaScript in a browser can't change the system clock. It would be all sorts of horror if it could.
I have a countdown script that gets the live time and subtracts it from a set time. It all works apart from the fact that it doesn't update unless you refresh your page. The setInterval at the bottom of my function instructs the function to run every one second, but it doesn't seem to be doing that...
Can anybody help?
Here is my jsfiddle: http://jsfiddle.net/4yMZy/
Each time cCountDown runs, its is calculating the time left like so:
nDates = new Date(datetime);
xDay = new Date("Fri, 26 May 2012 16:34:00 +0000");
timeLeft = (xDay - nDates);
The value of datetime there never changes from one run to another. So cCountDown is constantly running, but is always comparing the difference between the same two dates. Since the same two dates are used, the difference is always the same, so you do not see any countdown occur.
You could change nDates = new Date(datetime); to nDates = new Date(); and it will start counting down, but I am not sure why you are getting datetime from some server in the first place.
There are some other issues with your code as well. You should run it through jslint or jshint.
If changed your code to http://jsfiddle.net/4yMZy/7/
So it fetches the time and updates the seconds according to the set interval.
Edit:
jsfiddle actually provides a button for that on the top.
I am working on a little script that warns the user that his session is about to time out and his/her changes might not get saved.
On any browser, that works pretty well and I implemented a solution that just uses setTimeout to trigger a dialog box after a certain amount of time (unless the user takes certain actions in between).
On iOS Safari, however, this approach doesn't work, as the setTimeout gets "halted" while the user navigates to another app on his/her phone. Once the user opens Safari again and comes back to the page, the timer continues where it left off, rather than looking at the total time that expired.
Any suggestions on how to approach a session timeout warning that doesn't break on the iPhone?
Set the end time of the session in a variable.
Instead of using a counter, use javascript's date:
// get a date object
var today = new Date();
// ask the object for some information
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
var theHour = today.getHours();
Compare the end time to the current time every second
Disclaimer: Handle case where user returns and session has ended.