jQuery digital clock plugin

  •  
  •  
  •  
  •  
  •  
  •  

Hi friends, in this tutorial, I will show you how to create a simple jQuery digital clock plugin with the help of jQuery and CSS. This clock displays dynamic time. Here is nothing hard enough to understand. Simple HTML, CSS, and jQuery codes are used here.

jQuery digital clock plugin

HTML – jQuery digital clock

The HTML is very simple and flexible. You just need to create an HTML element and set a class or an id to it. It will display our time. You can assign any name to class or id. The HTML element can be a div, span, h1, p etc.

<div class="clock"></div>

jQuery – jQuery digital clock

At first, we need to include the following two JavaScript file. The first one is jQuery library file. And the second one is the JS file where our jQuery codes are written.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/clock.js"></script>

Create a new script tag and call the dynamicClock() function within it.

$(document).ready(function() {
    $(".clock").dynamicClock(); //.clock is the class name of the div
});

You can display more than one clock with different themes on a single web page.

<div class="clock1"></div>
<div class="clock2"></div>
<div class="clock3"></div>
<div class="clock4"></div>


$(document).ready(function() {
  $(".clock1").dynamicClock();
  $(".clock2").dynamicClock({
    theme:"mtb_theme1" //mtb_theme1,mtb_theme2,mtb_theme3,mtb_theme4,mtb_theme5
  });
  $(".clock3").dynamicClock({
    theme:"mtb_theme2" //mtb_theme1,mtb_theme2,mtb_theme3,mtb_theme4,mtb_theme5
  });
  $(".clock4").dynamicClock({
    theme:"mtb_theme3" //mtb_theme1,mtb_theme2,mtb_theme3,mtb_theme4,mtb_theme5
  });
});

clock.js

Create a JS file clock.js within js folder and write the following contents in it.

(function($) {
  $.fn.dynamicClock = function(options) {
    var settings = $.extend({
      theme:"mtb_theme1"
    }, options);
    
    this.css({
      "display":"inline-block"
    });
    
    this.html("<ul class='dynm-time'><li>00</li><li>:</li><li>00</li><li>:</li><li>00</li><li></li></ul>");
    $("ul.dynm-time").css({"margin":"0px","padding":"0px","display":"inline"});
    $("ul.dynm-time li").css("display","inline");
    
    if(settings.theme == "mtb_theme1") { $(this).addClass("mtb_theme1"); }
    else if(settings.theme == "mtb_theme2") { $(this).addClass("mtb_theme2"); }
    else if(settings.theme == "mtb_theme3") { $(this).addClass("mtb_theme3"); }
    else if(settings.theme == "mtb_theme4") { $(this).addClass("mtb_theme4"); }
    else if(settings.theme == "mtb_theme5") { $(this).addClass("mtb_theme5"); }
    
    setInterval(function() {
      var date    = new Date();
      var time    = date.getTime();
      var hours   = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      
      var ampm = (hours < 12) ? " AM" : " PM";
      hours    = (hours > 12) ? hours - 12 : hours;
      hours    = addZero(hours);
      minutes  = addZero(minutes);
      seconds  = addZero(seconds);
      
      $("li:nth-child(1)").html(hours);
      $("li:nth-child(3)").html(minutes);
      $("li:nth-child(5)").html(seconds);
      $("li:nth-child(6)").html(ampm);
      return this;
    }, 1000);
  };
}(jQuery));

function addZero(time, limit) {
  var time = (time < 10) ? "0"+time : time;
  return time;
}

clock.css

.mtb_theme1 {
  padding: 5px 10px !important;
  font-size:15px;
  font-weight:bold;
}
.mtb_theme2 {
  padding: 5px 10px !important;
    background-color: #2a2a2a;
    color: #00CCFF;
  font-size:20px;
}
.mtb_theme3 {
  padding: 5px 10px !important;
  border:1px solid #2a2a2a;
    color: #000;
  font-size:20px;
  font-weight:bold;
  border-radius:5px;
}
.mtb_theme4 {
  padding: 30px 30px !important;
  background-color: #737373;
    color: #fff;
  font-size:40px;
  border-radius:5px;
}
.mtb_theme5 {
  padding: 30px 30px !important;
  background-color: #1773E3;
    color: #fff;
  font-size:40px;
  border-radius:5px;
}
.mtb_theme1 li,.mtb_theme2 li,.mtb_theme3 li,.mtb_theme4 li,.mtb_theme5 li {
  margin:1px;
}

jQuery digital clock plugin

Download the plugin and the full source code from the below download link and please like and share the tutorial link.

About Mitrajit

Leave a Reply

Your email address will not be published. Required fields are marked *

Prove you are a human *