Javascript live clock
It came to pass, that I needed to display the time on a page (though i'm still wondering why because windows does that for you on the task bar). Obviously the solution would be javascript. Here's the code i used, maybe someone would find it useful.
Description of what's happening is after the code.
<HTML>
<script>
setInterval("setTheTime()", 1000);
function setTheTime () {
var curtime = new Date();
var curhour = curtime.getHours();
var curmin = curtime.getMinutes();
var cursec = curtime.getSeconds();
var time = "";
if(curhour == 0) curhour = 12;
time = (curhour > 12 ? curhour - 12 : curhour) + ":" +
(curmin < 10 ? "0" : "") + curmin + ":" +
(cursec < 10 ? "0" : "") + cursec + " " +
(curhour > 12 ? "PM" : "AM");
document.date.clock.value = time;
}
</script>
<body>
<form name="date">
<input type="text" name="clock" style="border: 0px" value="">
</form>
</body>
</html>;
Explanation:
setInterval("setTheTime()", 1000);
Set interval is a function that performs a task after an interval (in milliseconds) specified. It basically starts a 'thread' that keeps looping. Go here for more info on setInterval()
function setTheTime()
This function will calculate current time and update the necessary field / element on the page with the time.
var curtime = new Date();
This returns an object that represents the current date & time
var curhour = curtime.getHours();
var curmin = curtime.getMinutes();
var cursec = curtime.getSeconds();
self explanatory, right?
if(curhour == 0) curhour = 12;
the time is represented in 24hrs format, this statement converts the 00 hrs (which is 12AM) to the number 12. If you want to keep in 24 hrs, remark or remove this line.
time = (curhour > 12 ? curhour - 12 : curhour) + ":" +
(curmin < 10 ? "0" : "") + curmin + ":" +
(cursec < 10 ? "0" : "") + cursec + " " +
(curhour > 12 ? "PM" : "AM");
This statement forms the string that will be displayed. we'll take a look at it line by line.
(curhour > 12 ? curhour - 12 : curhour)
this is a conditional statement.
if the hour in 24hr format is more than 12, it will return the 12hr format equivalent which is obtained by deducting 12 from it. otherwise it will return the same value.
(curmin < 10 ? "0" : "") + curmin ;
another conditional statement that returns a 0 to be prepended to the minute if its less that 10.
ex. 9 will be returned as 09, 5 as 05 etc...
(cursec < 10 ? "0" : "") + cursec ;
same as the minute.
(curhour > 12 ? "PM" : "AM")
returns the AM or PM text based on the hour.
document.date.clock.value = time;
this is a straightforward statement that tells which object's value needs to be updated with the text.
in more complex pages, like .aspx pages, you may need to update a textbox or label. use the following code
Updating a textbox:
document.all["<%=txtTime%>"].value = time
Updating a label:
document.getElementById("<%=lblDateTime%>").innerText = time
Note : I update the innerText property instead of the innerHtml because on some browsers, updating innerHtml repeatedly can cause a memory leak.
This is all fine when your elements are all on the page.
If the element you want to update is in a user control, it creates a different problem because the "<%=txtTime%>" or <%=lblDateTime%> will fail. You see, when a user control is registered, each control on each usercontrol (there can be more than one of the same user control on a page) rendered will be given a unique ID that we don't know at design time. So when the javascript tries to update the object, it can’t find it because there is no object with that ID and the time is not updated.
To overcome this, we use another property of the element we want to update, which is called the .ClientID which is the unique ID of the control that has been rendered.
So the new text should be
textbox: document.all["<%=txtTime.ClientID%>"].value = time
label : document.getElementById("<%=lblDateTime.ClientID%>").innerText = time
As for myself, i just use the object.ClientID whether or not i'm using user controls to avoid any complication.
Hope that helps.
ppl said stuff:
January 20, 2008 at 3:21 PM
thanks
your materials was really good ,as i am a beginner it is easy to understand
Post a Comment