jQuery Plugins › jQuery Time & Clock Plugins ›

Creating A Minimal Text Clock Plugin With jQuery

File Size: 3.33 KB
Views Total: 647
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE9+, FireFox, Opera, Safari#text clock
Creating A Minimal Text Clock Plugin With jQuery

A minimal jQuery based text clock that provides an unique way of displaying the current time on your webpage. It will automatically change the background color of your html page based upon the time of day.

How to use it:

1. Add the CSS class 'am' to your body tag.

<body class="am">

2. The HTML structure for the text clock.

<div class="clock">
  <span id="it-is" class="selected"> IT IS </span> 
  <div class="changing">
    <span id="around"> AROUND </span>
    <span id="almost"> ALMOST </span>
    <span id="ten"> TEN </span>
    <span id="quarter"> QUARTER </span>
    <span id="twenty"> TWENTY </span>
    <span id="five"> FIVE </span>
    <span id="half" >HALF</span>
    <span id="minutes"> MINUTES </span>
    <span id="to"> TO </span>
    <span id="past"> PAST </span>
    <span id="1"> ONE </span>
    <span id="3"> THREE </span>
    <span id="2"> TWO </span>
    <span id="4"> FOUR </span>
    <span id="5"> FIVE </span>
    <span id="6"> SIX </span>
    <span id="7"> SEVEN </span>
    <span id="8"> EIGHT </span>
    <span id="9"> NINE </span>
    <span id="10"> TEN </span>
    <span id="11"> ELEVEN </span>
    <span id="12"> TWELVE </span>
    <span id="oclock"> O'CLOCK </span>
  </div>
</div>

3. Include the necessary jQuery library on your webpage.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

4. The core function.

// Returns the current time
function getTime () {
  return new Date();
}

var minsInWords = {
  5 : "five",
  10 : "ten",
  15 : "quarter",
  20 : "twenty",
  25 : ["twenty", "five"],
  30 : "half",
  35 : ["twenty", "five"],
  40 : "twenty",
  45 : "quarter",
  50 : "ten",
  55 : "five"
};

// Returns the nearest "5" of the given number
function roundToFive (num) {
  return 5 * Math.round(num/5);
}

// Gets the current time and sets it on the text clock
function setTime () {
  $(".clock .changing").children().removeClass("selected", { easing: 'easeOutBounce' });

  var currTime = getTime();
  var hours = currTime.getHours();
  if (hours > 12) {
    hours = hours - 12;
    $("body").removeClass("am");
    $("body").addClass("pm");
  } else {
    $("body").removeClass("pm");
    $("body").addClass("am");
  }

  var mins = currTime.getMinutes();

  // set the hour 
  if (mins <= 30) {
    $("#" + hours).addClass("selected");
    if (mins > 2) {
      $("#past").addClass("selected");
      $("#minutes").addClass("selected");
    }
  } else {
    $("#" + (hours + 1)).addClass("selected");
    $("#to").addClass("selected");
  }

  // set the descriptive words
  if (mins % 5 == 0) {
    // do nothing
  } else if (mins % 5 < 3) {
    $("#around").addClass("selected");
  } else if (mins % 5 <= 4) {
    $("#almost").addClass("selected");
  }

  $("#oclock").addClass("selected");

  // set the minutes
  if (mins > 2) {
    var roundFive = roundToFive(mins);
    var minsWords = minsInWords[roundFive];
    
    // if the mins in words are "quarter" or "half", remove the selection on "minutes"
    if (minsWords == "quarter" || minsWords == "half") $("#minutes").removeClass("selected");
    
    if (Array.isArray(minsWords)) {
      $.each(minsWords, function(i, el) {
        $("#" + el).addClass("selected");
      });
    } else {
      $("#" + minsWords).addClass("selected");
    }
  }
}

5. Initialize the text clock.

$(document).ready(function(){
  setTime();
  // Function is called every 2 secs to update the UI
  setInterval(function(){ setTime(); }, 2000);
});

6. Style the text clock whatever you like.

body { color: lightgrey; }

.clock {
  width: 500px;
  overflow: hidden;
  font-size: 38px;
  margin: 0 auto;
}

.am {
  background-color: white;
  color: #F1F4F5;
}

.am .selected { color: #08DAF5; }

.pm {
  background-color: black;
  color: #757575;
}

.pm .selected { color: #FFE500; }

.clock .changing { display: inline; }

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