Javascript show date and time with CSS3 and Jquery ( Display the current day and time jquery )

generating preview

<html> <head> <style> body{ font-family:'Verdana', sans-serif; background:#black; } .clock { margin-left:auto; margin-right:auto; width:100%; margin-top: 10%; color:#fff; background:grey; } #Date { font-family: Arial, Helvetica, sans-serif; font-size:20px; text-align:center; text-shadow:0 0 5px #00c6ff; } ul { width:100%; margin:0 auto; padding:0px; list-style:none; text-align:center; } ul li { display:inline; font-size:5em; text-align:center; font-family: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; } } </style> </head> <body> <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> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(document).ready(function() { // Create two variables with names of months and days of the week in the 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 an object newDate() var newDate = new Date(); // Retrieve the current date from the Date object newDate.setDate(newDate.getDate()); // At the output of the day, date, month and year $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear()); setInterval( function() { // Create an object newDate () and extract the second of the current time var seconds = new Date().getSeconds(); // Add a leading zero to the value of seconds $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds); },1000); setInterval( function() { // Create an object newDate () and extract the minutes of the current time var minutes = new Date().getMinutes(); // Add a leading zero to the minutes $("#min").html(( minutes < 10 ? "0" : "" ) + minutes); },1000); setInterval( function() { // Create an object newDate () and extract the clock from the current time var hours = new Date().getHours(); // Add a leading zero to the value of hours $("#hours").html(( hours < 10 ? "0" : "" ) + hours); }, 1000); }); </script> </body> </html>

How to Use this Elements / Source Code:

You Can Use Display the current day and time jquery elements by select the above source code (CTRL + A) then copy the code (CTRL + C) and paste (CTRL + V) it in a blank html Page to initially test it. Then you can use the Above Javascript show date and time with CSS3 and Jquery where ever you want for your project.

Usage of Real time changing Clock showing date and time:

You Can Use this Display of current day and time jquery elements of every websites top or bottom of the header that every user can view the current date. Minly it can be used in school or college websites & Tour or Travel websites.