Digital Clock using jQuery

In this article, we are going to create Digital Clock using jQuery. You can use this simple program to your thesis projects or any kind of systems that you've created. Kindly download the full source code below.

You will Learn:

  • You can learn to construct simple markup using HTML.
  • You can learn to create stylish Digital Clock.
  • You can learn to build Digital Clock using jQuery.

Creating Markup

Creating simple HTML source code to display our Digital Clock. Kindly copy and paste this short source code to your BODY tag of your page.
  1. <a href="" style="text-decoration:line-through; color:blue;"><h1>Digital Clock using jQuery</h1></a>
  2. <div class="container">
  3. <div class="clock">
  4. <div id="Date"></div>
  5.  
  6. <ul>
  7. <li id="hours"> </li>
  8. <li id="point">:</li>
  9. <li id="min"> </li>
  10. <li id="point">:</li>
  11. <li id="sec"> </li>
  12. </ul>
  13.  
  14. </div>
  15. </div>

Constructing CSS Style

This style where you can edit your Digital Clock design. After downloading the source code below, try to edit the design more attractive to the user. Enjoy coding.
  1. body{
  2. background:#f5f5f5;
  3. font:bold 12px Arial, Helvetica, sans-serif;
  4. margin:0;
  5. padding:0;
  6. min-width:960px;
  7. color:#000;
  8. }
  9.  
  10. a {
  11. text-decoration:none;
  12. color:darkblue;
  13. }
  14.  
  15. h1 {
  16. font: 4em normal Arial, Helvetica, sans-serif;
  17. padding: 20px; margin: 0;
  18. text-align:center;
  19. }
  20.  
  21. h1 small{
  22. font: 0.2em normal Arial, Helvetica, sans-serif;
  23. text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
  24. display: block;
  25. }
  26.  
  27. h2 {
  28. font-weight:700;
  29. color:#bbb;
  30. font-size:20px;
  31. }
  32.  
  33. h2, p {
  34. margin-bottom:10px;
  35. }

jQuery Script

This script that we are going to construct helps us to display a Digital Clock in our page. We have the list of months and name of the day. Copy and paste this script to your HEAD tag of your page.
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. // Create two variable with the names of the months and days in an array
  4. var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
  5. var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
  6.  
  7. // Create a newDate() object
  8. var newDate = new Date();
  9. // Extract the current date from Date object
  10. newDate.setDate(newDate.getDate());
  11. // Output the day, date, month and year
  12. $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
  13.  
  14. setInterval( function() {
  15. // Create a newDate() object and extract the seconds of the current time on the visitor's
  16. var seconds = new Date().getSeconds();
  17. // Add a leading zero to seconds value
  18. $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
  19. },1000);
  20.  
  21. setInterval( function() {
  22. // Create a newDate() object and extract the minutes of the current time on the visitor's
  23. var minutes = new Date().getMinutes();
  24. // Add a leading zero to the minutes value
  25. $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
  26. },1000);
  27.  
  28. setInterval( function() {
  29. // Create a newDate() object and extract the hours of the current time on the visitor's
  30. var hours = new Date().getHours();
  31. // Add a leading zero to the hours value
  32. $("#hours").html(( hours < 10 ? "0" : "" ) + hours);
  33. }, 1000);
  34.  
  35. });
  36. </script>

Output


Result
Kindly click the "Download Code" button below for full source code. Thank you very much. If you are interested in programming, we have an example of programs that may help you even just in small ways. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment