Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Digital Clock With Complete Time And Date Using CSS And JavaScript.

Thursday, Sep 28, 2017

Tags:- JavaScript CSS


In this tutorial we will create a Digital Clock with complete time and date using JavaScript and CSS.You may also like JavaScript date time countdown.


See Demo
Digital Clock


To create a Digital Clock it takes only two steps:-

  1. Make a HTML file and define markup and script for Digital Clock
  2. Make a CSS file and define styling for Digital Clock


Step 1.Make a HTML file and define markup and script for Digital Clock

We make a HTML file and save it with a name clock.html

<html>
<head>
  <link rel="stylesheet" type="text/css" href="clock_style.css">
  <script type="text/javascript">
    window.onload = setInterval(clock,1000);

    function clock()
    {
	  var d = new Date();
	  
	  var date = d.getDate();
	  
	  var month = d.getMonth();
	  var montharr =["Jan","Feb","Mar","April","May","June","July","Aug","Sep","Oct","Nov","Dec"];
	  month=montharr[month];
	  
	  var year = d.getFullYear();
	  
	  var day = d.getDay();
	  var dayarr =["Sun","Mon","Tues","Wed","Thurs","Fri","Sat"];
	  day=dayarr[day];
	  
	  var hour =d.getHours();
      var min = d.getMinutes();
	  var sec = d.getSeconds();
	
	  document.getElementById("date").innerHTML=day+" "+date+" "+month+" "+year;
	  document.getElementById("time").innerHTML=hour+":"+min+":"+sec;
    }
  </script>
</head>

<body>
   <h1>Flip Animated Login and SignUp Form Using CSS3 and jQuery</h1>
   <p id="date"></p>
   <p id="time"></p>

 </body>
</html>

In this step we make a date object to get date and time and write the values to paragraph.We use month and day array to get the particular of month and day in String becuase getDay() and getMonth() functions returns the number of particular month and day for eg If this is july getMonth function returns "6" and If today is Monday getDay returns "1" for more information of javascript date object click here JavaScript Date/Time.According to JavaScript Date Function The month and day begins with "0" like for January the value is "0" and same as for Sunday the value is "0".We use setInterval function of javascript to display the clock in every 1sec. You may also like Simple Value Countdown Using jQuery.



Step 2.Make a CSS file and define styling for Digital Clock

We make a CSS file and save it with name clock_style.css.

body
{
	background-color:#1C1C1C;
	text-align:center;
	font-family:helvetica;
}
h1
{
	margin:0px;
	margin-top:40px;
	color:#8181F7;
	font-size:45px;
}
#date
{
	margin-top:70px;
	color:silver;
	font-size:40px;
	border:2px dashed #2E9AFE;
	padding:10px;
	width:500px;
	margin-left:250px;
}
#time
{
	margin-top:20px;
	font-size:130px;
	color:silver;
	border:2px dashed #2E9AFE;
	padding:10px;
	width:700px;
	margin-left:150px;
}

Thats all, this is how to create a Digital Clock With Complete Time And Date Using CSS And JavaScript.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.