Creating A Minimal Text Clock Plugin With jQuery - Download Creating A Minimal Text Clock Plugin With jQuery

Download Creating A Minimal Text Clock Plugin With jQuery

By Posted on

This time I will share jQuery Plugin and tutorial about Creating A Minimal Text Clock Plugin With jQuery, hope it will help you in programming stack.

Creating A Minimal Text Clock Plugin With jQuery - Download Creating A Minimal Text Clock Plugin With jQuery
File Size: 3.33 KB
Views Total: 597
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download



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.

view source
1 <body class="am">

2. The HTML structure for the text clock.

view source
01 <div class="clock">
02   <span id="it-is" class="selected"> IT IS </span>
03   <div class="changing">
04     <span id="around"> AROUND </span>
05     <span id="almost"> ALMOST </span>
06     <span id="ten"> TEN </span>
07     <span id="quarter"> QUARTER </span>
08     <span id="twenty"> TWENTY </span>
09     <span id="five"> FIVE </span>
10     <span id="half" >HALF</span>
11     <span id="minutes"> MINUTES </span>
12     <span id="to"> TO </span>
13     <span id="past"> PAST </span>
14     <span id="1"> ONE </span>
15     <span id="3"> THREE </span>
16     <span id="2"> TWO </span>
17     <span id="4"> FOUR </span>
18     <span id="5"> FIVE </span>
19     <span id="6"> SIX </span>
20     <span id="7"> SEVEN </span>
21     <span id="8"> EIGHT </span>
22     <span id="9"> NINE </span>
23     <span id="10"> TEN </span>
24     <span id="11"> ELEVEN </span>
25     <span id="12"> TWELVE </span>
26     <span id="oclock"> O'CLOCK </span>
27   </div>
28 </div>

3. Include the necessary jQuery library on your webpage.

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

4. The core function.

view source
01 // Returns the current time
02 function getTime () {
03   return new Date();
04 }
05  
06 var minsInWords = {
07   5 : "five",
08   10 : "ten",
09   15 : "quarter",
10   20 : "twenty",
11   25 : ["twenty", "five"],
12   30 : "half",
13   35 : ["twenty", "five"],
14   40 : "twenty",
15   45 : "quarter",
16   50 : "ten",
17   55 : "five"
18 };
19  
20 // Returns the nearest "5" of the given number
21 function roundToFive (num) {
22   return 5 * Math.round(num/5);
23 }
24  
25 // Gets the current time and sets it on the text clock
26 function setTime () {
27   $(".clock .changing").children().removeClass("selected", { easing: 'easeOutBounce' });
28  
29   var currTime = getTime();
30   var hours = currTime.getHours();
31   if (hours > 12) {
32     hours = hours - 12;
33     $("body").removeClass("am");
34     $("body").addClass("pm");
35   } else {
36     $("body").removeClass("pm");
37     $("body").addClass("am");
38   }
39  
40   var mins = currTime.getMinutes();
41  
42   // set the hour
43   if (mins <= 30) {
44     $("#" + hours).addClass("selected");
45     if (mins > 2) {
46       $("#past").addClass("selected");
47       $("#minutes").addClass("selected");
48     }
49   } else {
50     $("#" + (hours + 1)).addClass("selected");
51     $("#to").addClass("selected");
52   }
53  
54   // set the descriptive words
55   if (mins % 5 == 0) {
source : jqueryscript.net

Related posts: