hello all, this is my first time on this site and i can usally find all the information i need on google. However iv run into a problem while coding a countdown timer for students in my school i will be hosting it as a mobile website. what im having problems with is getting not the system time, but 1 syncronized time source ex. The official U.S.time or any other single time source if that one will not be the best. any suggestions?
ps. i am completely new to js so make any suggestions and please explain throughly.
If you can *FIND* a "universal clock" online somewhere, you can probably read it with server-side code (JSP/PHP/ASP) but unless they provide some sort of includable JS you won't be able to read it from JS.
I'm not sure how much good that will do you. By the time the server goes running across the internet to get the universal clock, grabs the response, sends the page out to the browser, the browser renders it...well, you will certainly be many many milliseconds "off" and possibly as much as a couple of seconds. Despite what people think, the internet is *NOT* instantaneous.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
well maybe it will help if i tell you a little more about my project, it will be a mobile website that will take the current time supplied by the website and at 8:00 assuming thats when school starts will start a 2 hour timer down to the second.(note the time can be off by a couple seconds) it really doesn't matter because i can synchronize it with the delay. even then it still does not have to be perfect. one the timer reaches 0 it will start a 5 minute timer for the class changes, 15 minutes for our break time, 2 hours... so forth.
I think the OP just wants to make sure that kids aren't cheating by changing their PCs clock; ms accuracy is not important in that case.
In fact, nether precise nor accurate time is important, so long as it's consistent among all users.
Code:
<body>
<h1 id="time"></h1>
<script type='text/javascript'>
function el(tid) {return document.getElementById(tid);}
function serverTime(s){
el("time").innerHTML= "Time is " + s.hour +
":" + s.minute +
":"+s.second;
}
</script>
<script type='text/javascript' src='http://json-time.appspot.com/time.json?callback=serverTime'></script>
</body>
i'll leave the formatting up to the OP, but the info needed is all available in the code above.
you can also pull the date from your own server using ajax's XHRT.getResponseHeader("date") command; if your server attaches that header....
__________________ my site (updated 5/13) STATS (2013/5) HTML5:90.2% MOB:15.2% IE7:0.5% IE8:8.4% IE9:8.5% IE10:8.5%
Why not just display how much time is left on page load without having to use javascript.
If you want some kind of count down to actually display on the page you will probably need javascript and/or AJAX (which is javascript anyway). For browsers that have javascript disabled for some reason, you would have to come up with a plan B, so imo using javascript is not the best solution.
Why not just display how much time is left on page load without having to use javascript.
If you want some kind of count down to actually display on the page you will probably need javascript and/or AJAX (which is javascript anyway). For browsers that have javascript disabled for some reason, you would have to come up with a plan B, so imo using javascript is not the best solution.
alright yes i did not really know what would be best solution and also can you tell me how this will be done like an example of the coding i can edit iv spent all day researching js to do this and really don't feel like learning a whole new language. :/
So *is* the important part that the clock be accurate to the "master" system time, so that a student resetting his/her computer's clock won't be able to affect it?
If so, and if you have a master system host computer that has an accurate enough clock, then this isn't hard. Though you would need a *tiny* bit of server side coding for it (PHP/JSP/ASP).
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
So *is* the important part that the clock be accurate to the "master" system time, so that a student resetting his/her computer's clock won't be able to affect it?
If so, and if you have a master system host computer that has an accurate enough clock, then this isn't hard. Though you would need a *tiny* bit of server side coding for it (PHP/JSP/ASP).
Aha! thankyou! an idea has risen! lol i know what do do now! something along the lines of this:
Code:
var _countDowncontainer=0;
var _currentSeconds=0;
function ActivateCountDown(strContainerID, initialValue) {
_countDowncontainer = document.getElementById(strContainerID);
if (!_countDowncontainer) {
alert("count down error: container does not exist: "+strContainerID+
"\nmake sure html element with this ID exists");
return;
}
SetCountdownText(initialValue);
window.setTimeout("CountDownTick()", 1000);
}
function CountDownTick() {
if (_currentSeconds <= 0) {
alert("your time has expired!");
return;
}
SetCountdownText(_currentSeconds-1);
window.setTimeout("CountDownTick()", 1000);
}
function SetCountdownText(seconds) {
//store:
_currentSeconds = seconds;
//get minutes:
var minutes=parseInt(seconds/60);
//shrink:
seconds = (seconds%60);
//get hours:
var hours=parseInt(minutes/60);
//shrink:
minutes = (minutes%60);
//build text:
var strText = AddZero(hours) + ":" + AddZero(minutes) + ":" + AddZero(seconds);
//apply:
_countDowncontainer.innerHTML = strText;
hosted by my own sever! ha thanks man i will probably get stuck again so ill reuse this thread and multi-quote you all thanks!
So *is* the important part that the clock be accurate to the "master" system time, so that a student resetting his/her computer's clock won't be able to affect it?
If so, and if you have a master system host computer that has an accurate enough clock, then this isn't hard. Though you would need a *tiny* bit of server side coding for it (PHP/JSP/ASP).
Quote:
Originally Posted by bullant
Why not just display how much time is left on page load without having to use javascript.
If you want some kind of count down to actually display on the page you will probably need javascript and/or AJAX (which is javascript anyway). For browsers that have javascript disabled for some reason, you would have to come up with a plan B, so imo using javascript is not the best solution.
Quote:
Originally Posted by rnd me
I think the OP just wants to make sure that kids aren't cheating by changing their PCs clock; ms accuracy is not important in that case.
In fact, nether precise nor accurate time is important, so long as it's consistent among all users.
Code:
<body>
<h1 id="time"></h1>
<script type='text/javascript'>
function el(tid) {return document.getElementById(tid);}
function serverTime(s){
el("time").innerHTML= "Time is " + s.hour +
":" + s.minute +
":"+s.second;
}
</script>
<script type='text/javascript' src='http://json-time.appspot.com/time.json?callback=serverTime'></script>
</body>
i'll leave the formatting up to the OP, but the info needed is all available in the code above.
you can also pull the date from your own server using ajax's XHRT.getResponseHeader("date") command; if your server attaches that header....
Quote:
Originally Posted by yellosnomonkee
Aha! thankyou! an idea has risen! lol i know what do do now! something along the lines of this:
Code:
var _countDowncontainer=0;
var _currentSeconds=0;
function ActivateCountDown(strContainerID, initialValue) {
_countDowncontainer = document.getElementById(strContainerID);
if (!_countDowncontainer) {
alert("count down error: container does not exist: "+strContainerID+
"\nmake sure html element with this ID exists");
return;
}
SetCountdownText(initialValue);
window.setTimeout("CountDownTick()", 1000);
}
function CountDownTick() {
if (_currentSeconds <= 0) {
alert("your time has expired!");
return;
}
SetCountdownText(_currentSeconds-1);
window.setTimeout("CountDownTick()", 1000);
}
function SetCountdownText(seconds) {
//store:
_currentSeconds = seconds;
//get minutes:
var minutes=parseInt(seconds/60);
//shrink:
seconds = (seconds%60);
//get hours:
var hours=parseInt(minutes/60);
//shrink:
minutes = (minutes%60);
//build text:
var strText = AddZero(hours) + ":" + AddZero(minutes) + ":" + AddZero(seconds);
//apply:
_countDowncontainer.innerHTML = strText;
hosted by my own sever! ha thanks man i will probably get stuck again so ill reuse this thread and multi-quote you all thanks!
ok, i realized this morning that my sever that is hosting the code above is not using the host machines time but simply running the js on the views pc witch is there time. can somone tell me how you would code something like that?
As I said, you have to *PASS* the server's time to the user's browser. And you have to do that with a smidgen of server-side code. JSP or ASP or PHP.
What to use depends on what kind of server you have (Apache? IIS? Linux? Windows?).
What you would do then is send to the browser the number of seconds from NOW (server time) to the expiration time (server time).
And then a simple countdown in the browser is all you need.
Comment: Avoid using setTimeout(). If there is a "hiccup" in the browser where something takes, say 1.5 seconds, all of a sudden the timeout becomes anything from 1 second to 2.5 seconds.
Instead, use setInterval( ).
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Before you post, read our: 
