/
jquery.analogueClock.mlklc.js
106 lines (91 loc) · 4.88 KB
/
jquery.analogueClock.mlklc.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
/* //////////////////////////////////////////////////////////////////////////////////////////////////////
///// Code mixing by Molokoloco ..... 2011 ......... [EVER IN PROGRESS (it's not done yet)] ////////////
//////////////////////////////////////////////////////////////////////////////////////////////////// */
/*
// Pixel polished jQuery & CSS3 analogue clock
// by @molokoloco 08/10/2011
// Infos : http://www.b2bweb.fr/molokoloco/pixels-polished-jquery-css3-analogue-clock/
// jsFiddle : http://jsfiddle.net/molokoloco/ajcRz/
// HTML
<link href="http://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="jquery.analogueClock.css">
<div id="clock">
<!--// PLUGIN BUILD THIS
<div class="digit" style="left:56px;top:0px;"><span>12</span></div>
<div class="digit" style="left:84px;top:7.50px;">1</div>
...12 digits...
<div class="sec" style="-webkit-transform:rotate(246deg);"><div class="clockwise"></div></div>
<div class="min" style="-webkit-transform:rotate(270deg);"><div class="clockwise"></div></div>
<div class="hour" style="-webkit-transform:rotate(412.5deg);"><div class="clockwise"></div></div>
<div class="time">13:45:41</div>
<div class="innerCenter"></div>
//-->
</div>
// USAGE ;
$('div#clock').analogueClock({digitBoxWidth:18, withDigitalTime:false});
*/
(function($) {
Number.prototype.padTime = function() { return (this < 10 ? '0'+this : this); };
$.fn.extend({ // Extend jQuery with custom plugin
rotate: function(degree) { // Cross browser rotate
return this.each(function() {
var rotate = 'rotate('+degree+'deg)';
return $(this).css({
'-moz-transform':rotate,
'-webkit-transform':rotate,
'-ms-transform':rotate,
'-o-transform':rotate,
transform:rotate
});
});
},
analogueClock: function(options) { // Analogue Clock plugin
options = $.extend({ // Default values
withHours:true, // Print digit time ?
withDigitalTime:true, // Print time (digital) in center
digitBoxWidth:20 // div.digit width : cf. css
}, options || {});
return this.each(function() {
var $clock = $(this);
// Built analog digits number
if (options.withHours) {
var plotsNum = 12, // 12 hours digits, normally ^^
increase = Math.PI * 2 / plotsNum, // cheeseCake
angle = -(increase * 3), // rotate midnight at top
clockCenter = parseInt($clock.innerWidth(), 10) / 2 - (options.digitBoxWidth / 2),
digitsHtml = '';
for (var i = 0; i < plotsNum; i++) {
var x = clockCenter * Math.cos(angle) + clockCenter,
y = clockCenter * Math.sin(angle) + clockCenter;
digitsHtml += '<div class="digit" style="left:'+x+'px;top:'+y+'px;">'+
(i % 3 == 0 ? '<span>'+(i == 0 ? plotsNum : i)+'</span>' : i)
+'</div>';
angle += increase;
}
$clock.append(digitsHtml);
}
// Buil clockwise
var $sec = $('<div class="sec"><div class="clockwise"></div></div>').appendTo($clock),
$min = $('<div class="min"><div class="clockwise"></div></div>').appendTo($clock),
$hour = $('<div class="hour"><div class="clockwise"></div></div>').appendTo($clock),
$time = (options.withDigitalTime ? $('<div class="time">00:00:00</div>').appendTo($clock) : null),
$innerCenter = $('<div class="innerCenter"></div>').appendTo($clock);
// Animate clockwise
var timer = function() {
var now = new Date(),
seconds = now.getSeconds(),
mins = now.getMinutes(),
hours = now.getHours();
$sec.rotate(seconds * 6); // 60 * 6 == 360°
$min.rotate(mins * 6);
$hour.rotate(hours * 30 + (mins / 2));
if (options.withDigitalTime)
$time.html(hours.padTime()+':'+mins.padTime()+':'+seconds.padTime());
setTimeout(timer, 300); // precision 300ms
};
timer(); // init !
return $(this);
});
}
});
})(jQuery);