<html>
<head>
<title>Simple PHP to Javascript date and time function</title>
<!-- The main trick to creating a timer in general with Javascript is to create a self-referencing function. You can see the function is named timer() then several lines down inside itself it calls the timer() function. -->
<script type="text/javascript">
function timer() {
// The first thing to do is to check if we have already gotten the server time or if the timer has been running. If the variable holding the "UNIX epoch" is empty (undefined-- whatever), then this is the first iteration and we should get the server time with the PHP function time().
if (typeof x=="undefined")
{
x=<?php echo(time()); ?> ;
}
// At this point we have a date and time in the form of a 'UNIX epoch', or milliseconds since January 01, 1970 at midnight beginning the day. That or we have the epoch with an unimportant number of seconds added depending on how long the script has been running. In any event an acceptable format of the date and time is in variable x.
// We create a Date object based on our variable x every cycle of the function and name the object t. If we already have a date object, it is destroyed by the new one. The UNIX epoch in milliseconds is an acceptable time format for the new Date() function. The epoch is also easy to get from PHP. Yay, for compatible intersystem data portability!
t=new Date(x);
// Awesome, now we can manipulate the object any way we see fit. I am getting a few pieces of data out of the object here.
hour=t.getHours();
min=t.getMinutes();
sec=t.getSeconds();
// These three lines are unimportant, I just happen to like fixed width displayed variables and leading zeros make that possible.
if (min<=9) { min="0"+min; }
if (sec<=9) { sec="0"+sec; }
if (hour<10) { hour="0"+hour; }
// Each time this function is run I am changing the text within the HTML tags with the id of "id" to a concatenated and formatted string using the Document Object Model.
document.getElementById("id").innerHTML=hour+":"+min+":"+sec;
// This is critical to incrementing the time. I am simply adding 1000 milliseconds to the UNIX epoch each iteration. The time object is based on x. Adding time to a date object is hard and boring. Adding 1000, the amount of milliseconds in 1 second, to x is easy.
x=x+1000;
// Accuracy to the second is fine in our example. This setTimeout() function sets a timer in milliseconds for the instructions within to be executed. The instructions within are to run the timer() function. This is referred to as self referencing and creates a theoretical infinite loop of these instructions. And not randomly coincidental, the timing matches the increment of x. So, to increase accuracy to the obvious maximum would to increment x by 1 and set the timer to execute every 1 millisecond.
setTimeout("timer()", 1000);
}
</script>
</head>
<!-- This onLoad event in the body tag triggers our first iteration of the timer() function which sets into motion the infinite loop via self reference.-->
<body onLoad="timer()";>
<!-- Here is our HTML element with the id of "id". We update what people see at the moment we change the innerHTML of these tags via the function.-->
<p id="id"></p>
</body>
</html>
No comments:
Post a Comment