First we start with the basic layout of html that is:
Code:
<html>
<head>
</head>
<body>
</body>
</html>
If u done that we gone edit this some parts edit the body tag to '<body onload="updateClock(); setInterval('updateClock()', 1000 )">'
If u done that its gone look like:
Code:
<html>
<head>
</head>
<body onload="updateClock(); setInterval('updateClock()', 1000 )">
</body>
</html>
Now we editing inside of the head tags:
We paste in the :
<script type="text/javascript">
</script>
This is gone allow you to add a javascript code into your html site
Now where gone add the javascript:
Step #1:
Make
Code:
function updateClock (){
}
This is gone make a Updating clock function
Step #2:
Add:
Code:
var currentTime = new Date ( );
This is gone make Your Time is correct and automatic update's
Step #3:
Add:
Code:
var currentHours = currentTime.getHours ();
var currentMinutes = currentTime.getMinutes ();
var currentSeconds = currentTime.getSeconds ();
This is gone make You Retrieve every Hour/Minute/Second
Step #4:
add:
Code:
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
This is check Secconds counted to 60 and if its dit its +1 minute to the minutes
Step #5:
Add:
Code:
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
This is gone check of Your Time is AM Or PM.
Step #6:
Add:
Code:
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
Convert the Hours if needed
Step #7:
Add:
Code:
currentHours = ( currentHours == 0 ) ? 12 : currentHours;
Convert an hours component of "0" to "12"
Step #8:
Add:
Code:
var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
Making its displays
Step #9:
Add:
Code:
document.getElementById("clock").firstChild.nodeValue = currentTimeString;
Update the time clock!
If u all done that your code is gone look like :
Code:
function updateClock (){
var currentTime = new Date ( );
//Get the hours for updating clock
var currentHours = currentTime.getHours ();
//Get the minuts for updating clock
var currentMinutes = currentTime.getMinutes ();
//Get the secconds for updating clock
var currentSeconds = currentTime.getSeconds ();
// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
// Choose either "AM" or "PM" as appropriate
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
// Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
// Convert an hours component of "0" to "12"
currentHours = ( currentHours == 0 ) ? 12 : currentHours;
// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
// Update the time display
document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}
Now your have made your 50% made your Javascript code(Its copy pasted ) so now we gone add it HTML Sided
Back to the html
Our code is gone look atm like:
Code:
<html>
<head>
<script type="text/javascript">
function updateClock (){
var currentTime = new Date ( );
//Get the hours for updating clock
var currentHours = currentTime.getHours ();
//Get the minuts for updating clock
var currentMinutes = currentTime.getMinutes ();
//Get the secconds for updating clock
var currentSeconds = currentTime.getSeconds ();
// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
// Choose either "AM" or "PM" as appropriate
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
// Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
// Convert an hours component of "0" to "12"
currentHours = ( currentHours == 0 ) ? 12 : currentHours;
// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
// Update the time display
document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}
</script>
</head>
<body onload="updateClock(); setInterval('updateClock()', 1000 )">
</body>
</html>
Now we neet to make its displays its very easy
Just add into the body tags :
Code:
<span id="clock"> </span>
The because else its got nothing to show and thats just blank code so its automatic shows
Ty for following my tutorial greetz nl Pk3er