https://ucas.ac.cn/js/jquery.codehim.clock.js?v=1790821565304

1/*  Plugin: Codehim Clock (Realistic Analog Clock)
2*   Frameworks: jQuery 3.3.1 
3*   Author: Asif Mughal
4*   GitHub: https://github.com/CodeHimBlog
5*   URL: https://www.codehim.com
6*   License: MIT License
7*   Copyright (c) 2018 - Asif Mughal
8*/
9/* File: jquery.codehim.clock.js */
10(function ($) {
11$.fn.CodehimClock = function (options) {
12  var setting = $.extend({
13    showSeconds: true, //false to hide seconds hand
14    showDate: true, //false to hide day and date
15    clockSize: "original", //possible options xsmall and xlarge
16  }, options);
17
18  return this.each(function () {
19    var clockDale,
20      secondHand,
21      minuteHand,
22      hourHand,
23      clockCenter,
24      clockLogo,
25      smallPoints,
26      dateSticker,
27      dayShow,
28      dateShow,
29      $time,
30      $second,
31      $minute,
32      $hour,
33      $csp,
34      $cmp,
35      $chp;
36
37    $time = new Date();
38    $second = $time.getSeconds();
39    $minute = $time.getMinutes();
40    $hour = $time.getHours();
41    $csp = 0; //current second position 
42    $cmp = 0; //current minutes position
43    $chp = 0; //current hour position
44
45    //Checking what is second and minute position right now 
46    for (var y = 6; y <= 360; y += 6) {
47
48      if ((y / $second).valueOf() === 6) {
49        $csp = y;
50      }
51      if ((y / $minute).valueOf() === 6) {
52        $cmp = y;
53      }
54    }
55
56    //Checking what is hour position right now 
57    for (var v = 0; v <= 360; v += 15) {
58      var hoursHand = $hour * 30 + ($minute / 2.1).valueOf();
59      $chp = hoursHand;
60    }
61
62    //Creating clock structure
63    clockDale = $div();
64    secondHand = $div();
65    minuteHand = $div();
66    hourHand = $div();
67    clockCenter = $div();
68    clockLogo = $div();
69    dateSticker = $div();
70    dayShow = $span();
71    dateShow = $span();
72
73    // Clock numbers 
74    var r = 1;
75    do {
76      var num = $span();
77      var $thisClass = "number " + "p" + r;
78      $(num).html(r)
79        .addClass($thisClass)
80        .appendTo(clockDale);
81      r++;
82    } while (r <= 12);
83
84    setInterval(function () {
85
86      var $time = new Date();
87      var second = $time.getSeconds();
88      var minute = $time.getMinutes();
89      var hour = $time.getHours();
90
91      //assigning values to seconds, minutes and hours after each second
92      $csp += 6;
93      $cmp += 0.10;
94      $chp += 0.0016666667;
95
96      //begin again clock hands rotation after completion of one round
97      if ($csp >= 360 || second == 0) {
98        $csp = 0;
99        $chp += 0.10;
100      }
101
102      //rotation of second hand with css3 transformation 
103      $(secondHand).addClass("seconds-hand").css({
104        'transform': 'rotate(' + $csp + 'deg)',
105        'transformOrigin': 'bottom',
106        'transition': '0s',
107      });
108
109      //minutes
110      $(minuteHand).addClass("minutes-hand").css({
111        'transform': 'rotate(' + $cmp + 'deg)',
112        'transformOrigin': 'bottom',
113      });
114
115      //hours
116      $(hourHand).addClass("hours-hand").css({
117        'transform': 'rotate(' + $chp + 'deg)',
118        'transformOrigin': 'bottom',
119      });
120
121    }, 1000);
122
123    $(clockDale)
124      .append(minuteHand)
125      .append(hourHand)
126
127      // applying clock settings
128      .addClass(setting.clockSize);
129
130    if (setting.showSeconds == true) {
131      $(clockDale).append(secondHand);
132    }
133
134
135    $(clockCenter)
136      .addClass("clock-center")
137      .appendTo(clockDale);
138
139    $(clockLogo)
140      .html("")
141      .addClass("clock-logo")
142      .appendTo(clockDale);
143
144    var $stData = [];
145
146    for (var st = 6; st <= 360; st += 6) {
147
148      var stRot = {
149        'transform': 'rotate(' + st + 'deg)',
150        '\-webkit\-transform': 'rotate(' + st + 'deg)',
151      };
152
153
154      $stData.push(stRot);
155    }
156
157
158    for (var $sr = 0; $sr <= 59; $sr++) {
159      smallPoints = $span();
160      var $thisClass = "point" + " pt" + $sr;
161      $(smallPoints)
162        .addClass($thisClass)
163        .css($stData[$sr])
164        .appendTo(clockDale);
165    }
166
167
168    var days = [
169      "Sun",
170      "Mon",
171      "Tue",
172      "Wed",
173      "Thu",
174      "Fri",
175      "Sat"
176    ];
177
178    var $thisDay = $time.getDay();
179    var $thisDate = $time.getDate();
180    var daleinner = $div();
181    var spinner1 = $div();
182    var spinner2 = $div();
183
184    $(dayShow).html(days[$thisDay])
185      .addClass("day")
186      .appendTo(dateSticker);
187
188    $(dateShow).html($thisDate)
189      .addClass("date")
190      .appendTo(dateSticker);
191
192    if (setting.showDate == true) {
193      $(dateSticker)
194        .addClass("date-box")
195        .appendTo(clockDale);
196    }
197
198    $(daleinner)
199      .addClass("dale-inner")
200      .appendTo(clockDale);
201
202    $(spinner1)
203      .addClass("logo-outer")
204      .appendTo(clockDale);
205
206    $(spinner2)
207      .addClass("logo-outer1")
208      .appendTo(clockDale);
209
210    $(clockDale)
211      .addClass("codehim-clock-dale")
212      .appendTo(this);
213
214
215
216    function $div() {
217      return document.createElement("div");
218    }
219    function $span() {
220      return document.createElement("span");
221    }
222  });
223};
224
225})(jQuery);
226
227/*   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
228EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
229MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
230NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
231LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
232OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
233WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */