CSS3 Digital Clock with jQuery

September 16, 2011

Hello everyone, this tutorial I wanted to create a simple digital clock with date and time, with the help of jQuery script and CSS3 for a little animation, there’s nothing hard enough to understand the various methods and use your creativity in the best of ways. This is just the beginning!

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 anything with your creativity, this is just a default setting for your future applications.

/* 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"></script>

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);	
});
</script>

The Logic

  1. new Date()
    This creates a new Date object with the value of the current date and time on the browser PC.
  2. setDate() and getDate()
    The 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.
  3. getSeconds(), getMinutes() and getHours()
    These methods allow to extract the seconds, minutes and hours of the current time on the browser PC.
  4. ( 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.
  5. 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.

Conclusion

Finally, we created a simple digital clock using CSS properties and jQuery. If anyone has any questions, concerns, or comments please feel free to let me know!

30 Comments

  1. I really loved this tutorial, I will practice is my own website. Again Thnx to the Contributor

  2. nice tutorial..
    allow me to use it
    Thank you very much

  3. Zamith

    You are pooling for the hour and minute every second, couldn’t that be refactored? It would reduce substantially the number of object created and of method calls…

  4. Awesome! Good job!

  5. ade

    Please can you put in one html file for easy download and implementation. Great work

  6. Waterdhavian

    In your unordered list you have to identical ID’s (point) so now it wont validate, change those IDs into classes.

  7. Hi, I liked the CSS3 Clock very much. Thanks for uploading this cool tutorial.

    I was wondering if it is possible to put nanoseconds in the clock.

    Thanking You
    Bokhari

  8. Gunjan Mahida

    I am New with jquery but an awesome tutorial . thanks for sharing. and i appreciate your job too !

  9. Jon jon

    Hi can u make this 12 hour format

  10. emrecc

    hi,
    thanx for tutoriol its really good., but l have question,
    how can l make clock numbers smaller? l can’t find where you arrange their size.

  11. emrecc

    l found it:) sory for disturbing

  12. ProAbuser

    @ JONJON you can do this:

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

  13. b1nar10

    Hi

    Thanks, it’s a nice clock :)

  14. Thanks, i replaced my old and slow date script & the in google chrome scroll lagging flash clock with your all in one solution.

  15. vicky

    dude… Thanks for the tutorial. its easy to understood…

  16. Thanks! Looks great. But:

    It is better to use 1 interval instead of 3.

    Check this:

    setInterval( function() {
    // 23.10.2012 – Reviewed code by KOSMONAUTS
    // Create a newDate() object and extract the hours of the current time on the visitor’s
    var hours = new Date().getHours();
    var minutes = new Date().getMinutes();
    var seconds = new Date().getSeconds();
    // Add a leading zero to the hours value
    $(“#hr”).html(( hours < 10 ? "0" : "" ) + hours);
    $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
    $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
    }, 1000);


    That's it! Hope you guys continue!

    Regards!

  17. I tried to setup the 12 hour format but I keep getting javascript errors.

    Firebug points to the ? being the problem.

    Have tried many options, help would appreciated. thanks

  18. Erick

    Code to make it 12h time? I can’t get it to work above…

  19. setInterval( function() {
    // Create a newDate() object and extract the hours of the current time on the visitor’s
    var d = new Date();
    var hh = d.getHours();
    var dd = “AM”;
    var h = hh;
    if (h >= 12) {
    h = hh-12;
    dd = “PM”;
    }
    if (h == 0) {
    h = 12;
    }
    // Add a leading zero to the hours value
    $(“#hours”).html(( h < 10 ? "0" : "" ) + h);
    }, 1000);

  20. Matt

    If you want 12 hour format, do this:

    // Convert to 12 hour format
    if (hours > 12) {
    hours -= 12;
    } else {
    hours = hours;
    }

    This is the same thing that PROABUSER posted, except it’s not in ternary. It’s actually readable.

  21. ivan

    Its amazing example how i can connect with zone times like a api?
    thanks

  22. leet

    Thank you sir!
    and Matt, thank you too!

  23. Matt’s version worked perfectly, not sure how to add “AM/PM” to it but this works regardless! Thanks!!

  24. That Digital Clok Is So Shiny …

    Actually I Want use it but i think i need something to do with it first….

    like change the color, the laguage,etc,etc

    BTW … Thanks for the info mate !
    please visit my blog at : http://pusyakiz.blogspot.com/

    :)

  25. Richmund

    Thank you!…

  26. Jp

    Wow, this is so neat! Thank you so very much for sharing!

  27. mauricio

    Thank you very much from Patagonia Argentina!

  28. Matt Sweex

    Thanks for the great tutorial!

Leave a Reply