Modern Digital Clock In jQuery

File Size: 3.13 KB
Views Total: 2296
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Modern Digital Clock In jQuery

A modern-looking digital clock with date and day of week, created with jQuery, HTML, and CSS.

How to use it:

1. Code the HTML for the digital clock.

<div class="content">
  <div class="timeDiv">
    <span class="font-color" id="time"></span>
    <span class="font-color" id="sec"></span>
    <span class="font-color" id="med"></span>
  <div class="dayDiv">
    <span class="font-color day">SUN</span>
    <span class="font-color day">MON</span>
    <span class="font-color day">TUE</span>
    <span class="font-color day">WED</span>
    <span class="font-color day">THU</span>
    <span class="font-color day">FRI</span>
    <span class="font-color day">SAT</span>
  <span class="font-color" id="full-date"></span>

2. The necessary CSS styles.

  background: linear-gradient(to bottom,#2980b9,#2c3e50);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;

.content div{
  padding: 5px 0;

  position: relative;

  text-shadow: 0 0 55px #2980b9;
  font-size: 4.5rem;

  top: 15px;
  right: 0;

  display: flex;

.dayDiv span{
  font-size: 0.9rem;
  opacity: 0.4;
  margin:0 4px;

3. The main JavaScript (jQuery script) to enable the digital clock.

<script src="/path/to/cdn/jquery.min.js"></script>
$(document).ready(function () {
  function currentTime() {
    var date = new Date();
    var day = date.getDay();
    var hour = date.getHours();
    var min = date.getMinutes();
    var sec = date.getSeconds();
    var month = date.getMonth();
    var currDate = date.getDate();
    var year = date.getFullYear();
    var monthName = [
    var showDay = $('.dayDiv span')
    var midDay= "AM"
    midDay = (hour>=12)? "PM":"AM";
    hour = (hour==0)?12:((hour<12)? hour:(hour-12));
    hour = updateTime(hour);
    min = updateTime(min);
    sec = updateTime(sec);
    currDate= updateTime(currDate);
    $("#full-date").html(`${monthName[month]} ${currDate} ${year}`);
  updateTime = function(x){
      return "0"+x
      return x;

This awesome jQuery plugin is developed by Manoj-14. For more Advanced Usages, please check the demo page or visit the official website.