Simple Digital Clock in jQuery and CSS

Category: Date & Time | August 6, 2020
Author: Alessio Atzeni
Official Page: Go to Website
Last Update:August 1, 2023
License:MIT

In this tutorial, we are going to create a simple digital clock in jQuery and CSS3. The main purpose of this clock is to display local time with real-time changing of seconds. Similarly, we’ll also add day and date string in the digital clock as shown in the preview image.

The coding concept for this digital clock is simple. You just need to create a few HTML elements, style them with CSS and need a JavaScript function to get and run the time.

Additionally, we’ll add blinking points between the hours and minutes and animate them with CSS3 animations.

How to Create Digital Clock using jQuery

First of all, create a div element with a class name “clock” and place all clock elements like hours, minutes, and seconds in the unordered list. Similarly, create a div element with id “Date” for day and date string. Wrap all these element into a section and define it’s class “container”.

<section class="container">
  <div class="clock">
   <div id="Date">Thursday 6 August 2020</div>
<ul>
	<li id="hours">10</li>
    <li id="point">:</li>
    <li id="min">13</li>
    <li id="point">:</li>
    <li id="sec">03</li>
</ul>
  </div>
</section>

After that, style the clock by adding the following CSS code snippet into your project. You can modify values in order to customize the digital clock.

.container {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}

.clock {
	width: 800px;
	margin: 0 auto;
	padding: 30px;
	border: 1px solid #333;
	color: #fff;
}

#Date {
	font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
	font-size: 36px;
	text-align: center;
	text-shadow: 0 0 5px #00c6ff;
}

ul {
	width: 800px;
	margin: 0 auto;
	padding: 0px;
	list-style: none;
	text-align: center;
}

ul li {
	display: inline;
	font-size: 10em;
	text-align: center;
	font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
	text-shadow: 0 0 5px #00c6ff;
}

#point {
	position: relative;
	-moz-animation: mymove 1s ease infinite;
	-webkit-animation: mymove 1s ease infinite;
	padding-left: 10px;
	padding-right: 10px;
}

@-webkit-keyframes mymove {
	0% {
		opacity: 1.0;
		text-shadow: 0 0 20px #00c6ff;
	}
	50% {
		opacity: 0;
		text-shadow: none;
	}
	100% {
		opacity: 1.0;
		text-shadow: 0 0 20px #00c6ff;
	}
}

@-moz-keyframes mymove {
	0% {
		opacity: 1.0;
		text-shadow: 0 0 20px #00c6ff;
	}
	50% {
		opacity: 0;
		text-shadow: none;
	}
	100% {
		opacity: 1.0;
		text-shadow: 0 0 20px #00c6ff;
	}
}

Now its time to functionalities the clock, for this purpose we’ll create a function to get the time and run hours, minutes, and seconds. So, before creating jQuery document ready function, make sure you have loaded jQuery JavaScript library into your HTML page. Add the following CDN link in the head section of your HTML document to load jQuery library.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Finally, create HTML script tag and copy the following function inside it. Each function defined in the following script described with comments. So, you can easily modify it to get the desired results according to your needs.

$(document).ready(function () {
	// Create two variable with the names of the months and days in an array
	var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
	var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

	// Create a newDate() object
	var newDate = new Date();
	// Extract the current date from Date object
	newDate.setDate(newDate.getDate());
	// Output the day, date, month and year    
	$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

	setInterval(function () {
		// Create a newDate() object and extract the seconds of the current time on the visitor's
		var seconds = new Date().getSeconds();
		// Add a leading zero to seconds value
		$("#sec").html((seconds < 10 ? "0" : "") + seconds);
	}, 1000);

	setInterval(function () {
		// Create a newDate() object and extract the minutes of the current time on the visitor's
		var minutes = new Date().getMinutes();
		// Add a leading zero to the minutes value
		$("#min").html((minutes < 10 ? "0" : "") + minutes);
	}, 1000);

	setInterval(function () {
		// Create a newDate() object and extract the hours of the current time on the visitor's
		var hours = new Date().getHours();
		// Add a leading zero to the hours value
		$("#hours").html((hours < 10 ? "0" : "") + hours);
	}, 1000);

});

You’ve all done! I hope you find this tutorial helpful to create a digital clock. You can further style it by modifying CSS values. If you have any questions or suggestions related to this digital clock, let me know by comment below.