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.
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.
2. The HTML structure for the text 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 > |
3. Include the necessary jQuery library on your webpage.
1 |
< script src = "//code.jquery.com/jquery-1.12.0.min.js" ></ script > |
4. The core function.
11 |
25 : [ "twenty" , "five" ], |
13 |
35 : [ "twenty" , "five" ], |
21 |
function roundToFive (num) { |
22 |
return 5 * Math.round(num/5); |
27 |
$( ".clock .changing" ).children().removeClass( "selected" , { easing: 'easeOutBounce' }); |
29 |
var currTime = getTime(); |
30 |
var hours = currTime.getHours(); |
33 |
$( "body" ).removeClass( "am" ); |
34 |
$( "body" ).addClass( "pm" ); |
36 |
$( "body" ).removeClass( "pm" ); |
37 |
$( "body" ).addClass( "am" ); |
40 |
var mins = currTime.getMinutes(); |
44 |
$( "#" + hours).addClass( "selected" ); |
46 |
$( "#past" ).addClass( "selected" ); |
47 |
$( "#minutes" ).addClass( "selected" ); |
50 |
$( "#" + (hours + 1)).addClass( "selected" ); |
51 |
$( "#to" ).addClass( "selected" ); |
source : jqueryscript.net