CSS JQUERY Clock

Hello everyone, in this tutorial I wanted to create a simple digital clock that displays the date and time, with the help of jQuery script and CSS3, it's easy to understand the various methods used.

HTML

The markup is really simple and flexible and adapts to many possible scenarios you might encounter. Create a div “clock“, create another div id “Date” it will contain our data, finally defines an unordered list that will contain the hour, minutes and seconds.

<div class="clock">

<div id="Date"></div>
<ul>
<li id="hours"></li>
<li id="point">:</li>
<li id="min"></li>
<li id="point">:</li>
<li id="sec"></li>
/ul>
/div>

CSS

The styling is very simple, you can create style you want, this is just a template for you.

/* If you want you can use font-face */ @font-face { font-family: 'BebasNeueRegular'; src: url('BebasNeue-webfont.eot'); src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('BebasNeue-webfont.woff') format('woff'), url('BebasNeue-webfont.ttf') format('truetype'), url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal; }

.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; }

/* Simple Animation */ @-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; }; }

jQuery

The first step is to call the jQuery file.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">

Create a new script tag and insert the code.

<script type="text/javascript"> $(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); });

The Logic
new Date()

Creates a new Date object with the value of the current date and time on the browser PC.

setDate() and getDate()

setDate() method sets the day of the month (from 1 to 31), according to local time, while the getDate() method returns the day of the month (from 1 to 31) for the specified date, according to local time. getSeconds(), getMinutes() and getHours()

These methods allow to extract the seconds, minutes and hours of the current time on the browser PC. ( seconds < 10 ? "0" : "" ) + seconds)

Add a leading zero to the seconds value, the same applies for the minutes and hours. The ? and : symbols used above comprise the ternary operator. This is a special operator that returns the value before the colon if the condition before the query (?) is true, or the value after the colon if the condition is false.

setInterval function

setInterval is a standard JavaScript function, not part of jQuery. You call it with a function to execute and a period in milliseconds.