Help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Clock</title>
<style type="text/css">
.clock{
width:18%;
padding:10px 20px 10px 20px;
font-size:15pt;
font-weight:bold;
color:#FFFFFF;
background:#000000;
}
</style>
</head>
<body>
<!--Create a div that will hold our clock, we will also give it a class for styling purposes-->
<div id="displayClock" class="clock"></div>
<script language="JavaScript" type="text/javascript">
function clock(){
var a = "AM";//Set a variable for AM and PM im just using AM to start it off with but ethers fine
var time = new Date(); //Make a call to the javascript date object
var hours = time.getHours(); //Get the hours
var mins = time.getMinutes(); //Get the minutes
var seconds = time.getSeconds() //Get the seconds
if(hours > 12){
hours = hours - 12; //If ours are greater then 12 take 12 away so it does not read in 24 hour format
a = "PM" //Set to PM
}
if(hours < 10){
hours = "0" + hours; //If hours are single digit add a 0
}
if (seconds < 10){
seconds = "0" + seconds; //If seconds are single digit add a 0
}
if (mins < 10){
mins = "0" + mins; //If minutes are single digit add a 0
}
var result = document.getElementById("displayClock"); //Get the element the clock will display in
result.innerHTML = hours + ":" + mins + ":" + seconds + " " + a ;
setTimeout("clock()",1000); //Update the clock every second
}
clock();//Call our clock function
</script>
</body>
</html>
Page 1 of 1
Doing a javascript clock display My tut
Rate Topic:
#1
webdesigner93 
- Web Guru
-
- Group: Members
- Posts: 1,976
- Joined: 22-September 09
- Reputation: 222
- Gender:Male
- Experience:Web Guru
- Area of Expertise:Web Developer
Posted 20 November 2010 - 08:54 PM
Ok so i've had some people ask me how would they do a live clock using javascript so i thought i'd show everyone a simple method for doing so. First just create a new html doc . then insert my javascript like below its commented to help u understand the code.
Share this topic:
Page 1 of 1