You are here: Home » JQuery » Javascript date with clock

Javascript date with clock

28 Flares 28 Flares ×

We can display a clock which will be showing the local time of the client computer by using JavaScript. Note that this time displayed is taken from user computer and not from the server.
Use below code for it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
	<script language="JavaScript" type="text/javascript">
				var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
				var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
 
				function getthedate(){
					var mydate=new Date()
					var year=mydate.getYear()
					if (year < 1000)
						year+=1900
					var day=mydate.getDay()
					var month=mydate.getMonth()
					var daym=mydate.getDate()
					if (daym<10)
						daym="0"+daym
					var hours=mydate.getHours()
					var minutes=mydate.getMinutes()
					var seconds=mydate.getSeconds()
					var dn="AM"
					if (hours>=12)
						dn="PM"
						if (hours>12){
							hours=hours-12
							}
						if (hours==0)
							hours=12
						if (minutes<=9)
							minutes="0"+minutes
						if (seconds<=9)
							seconds="0"+seconds
				//Display Current Day, Date & Time
					var cdate=dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
					if (document.all)
						document.all.clock.innerHTML=cdate
					else if (document.getElementById)
						document.getElementById("clock").innerHTML=cdate
					else
					document.write(cdate)
				}
				if (!document.all&&!document.getElementById)
					getthedate()
				function goforit(){
					if (document.all||document.getElementById)
						setInterval("getthedate()",1000)
					}
				goforit()

				</script>
</head>

<body>
	<div id="dateformat" style="position: absolute; width: 332px; height: 24px; z-index: 1; left: 368px; top: 1px; text-align:center" >
		
				<span id="clock"></span>
			</div>
</body>
</html>

About Abhishek Sinha

I am Abhishek and I love to code on PHP.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Scroll To Top
28 Flares Twitter 2 Facebook 1 Google+ 19 StumbleUpon 4 Pin It Share 0 LinkedIn 2 28 Flares ×