Showing current time and date using javascript

Posted in: javascript by musiitwa joseph 2015-09-30 at 06:59:23

image for Showing current time and date using javascript The date object helps us to know the date and time, its created using the date constructor with a new keyword. i.e. new Date(); The date object has a lot of methods, there are some that can be used to get current time and date. These are getMonth(); getDay(), getDate(), getFullyear() and toLocaleTimeString(); getDate() - returns the day of the month (From 1 to 31 depending on the month) getDay() - returns the day of the week (From 0 to 6, 0=sunday, 1=monday, 6=saturday) getMonth() - returns the month (From 0 to 11, 0=january) getFullyear - return the year toLocaleTimeString() - returns the current time
<html>
	<head>
		<title>SHOWING CURRENT TIME AND DATE IN JAVASCRIPT</title>	
		<style>
			*{
				margin:0;
				padding:0;
				background-color:#D7D7D7;
				font-family: Arial, Helvetica, sans-serif;
			}
			.container{
				width:400px;
				height:350px;
				padding:10px;
				margin:auto;
				text-align:center;
			}
			@font-face {
				font-family: 'digital';
				src: url('digital-7.ttf');
			}
			#tym{
				font-family:digital;
			}
			.time_date_container,#tym, #dat{
				background:#FFF;
			}
			#tym, #dat{
				text-align:left;
			}
			#dat{
				font-size:20px;
			}
			#tym{
				font-size:65px;
			}
			.time_date_container{				
				border:5px solid #000;
				text-align:center;
				border-radius:8px;
				position:relative;
				width:400px;
				height:150px;	
				margin:auto;
				padding:20px;
			}
			.time_date_container:before{
				content:'';
				position:absolute;
				width:20%;
				height:15px;
				left:40%;
				background-color:#000;
				top:190px;
			}
		</style>
	</head>
	<body>	
		<div class="container">
			<h1>SHOWING CURRENT TIME AND DATE IN JAVASCRIPT</h1>
			
<div class="time_date_container"> <div id="dat"></div> <div id="tym"></div> </div> </div> <footer> <br /><br /> <div style="text-align:center"> Tutorial by <b>Code eagles</b>. You can get more at <a href="http://www.codeeagles.com" target="_blank">www.codeeagles.com</a> </div> </footer> </body> <script type='text/javascript'> function _(x){ return document.getElementById(x); } function dateTime(){ var d=new Date(); var months = ['January','February','March','April','May','June','July','August','September','October','November','December']; var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; var t="", date = ""; /* d.getMonth() returns a number from 0 to 11 the returned number is passed to the array of months to get the corresponding month, this number is take as an index in the array This is the same thing done for d.getDay() */ date += months[d.getMonth()]; date += ', '; date += days[d.getDay()]; date += ' '; date += d.getDate(); date += ', '; date += d.getFullYear(); //current time t += d.toLocaleTimeString(); _("dat").innerHTML = '<img src="calendar.png" width="50" alt=""/> ' + date; _("tym").innerHTML = '<img src="clock.png" width="50" alt=""/> ' + t; } var dateTimeVar = setInterval(function(){dateTime()},1000); </script> </html>
Tags:
css
html

Search

Leave a comment

Fields with * are required
Your email address will not be displayed
3 + 4 =