✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Digital Clock With Complete Time And Date Using CSS And JavaScript

Last Updated : Jul 1, 2023

IN - JavaScript CSS | Written & Updated By - Dikshita

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.

Digital Clock With Complete Time And Date Using CSS And JavaScript

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

I hope this tutorial on digital clock in javascript helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →