-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
235 lines (192 loc) · 7.5 KB
/
index.html
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<html>
<head>
<title>Clock.js</title>
<meta name="description" content="The fast, lightweight JavaScript clock plugin">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-52254492-1', 'michalpaszkiewicz.co.uk');
ga('send', 'pageview');
</script>
</head>
<body>
<div class="main-container">
<div class="header">
<div class="panel-box">
<h1>ClockJS</h1>
</div>
</div>
<div style="position: fixed; width: 100%; height: 100%; top: 0; left: 0;">
<canvas id="my-canvas"></canvas>
<script src="./clock.js"></script>
<script>
var myClock = new clock("my-canvas",{colour:"rgba(255,0,0,0.1)",rimColour: "rgba(0,0,0,0.1)"});
</script>
</div>
<div class="panel">
<a id="fork-me" style="background:none; padding: 0" target="_blank" alt="Clock JS source code" href="https://github.com/MichalPaszkiewicz/clockjs">
<img style="position: fixed; top: 0; right: 0; border: 0; z-index: 50;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png">
</a>
<div class="panel-box">
<h2>The fast, responsive, lightweight, easy-to-use JavaScript clock plugin</h2>
<p>To use this clock plugin, simply add the following code to your page:</p>
<pre><code style="background:none" class="html">
<canvas id="my-canvas"></canvas>
<script src="http://www.michalpaszkiewicz.co.uk/clockjs/clock.js"></script>
<script>
var myClock = new clock("my-canvas");
myClock.start();
</script>
</code></pre>
<p>
The clock can be customised with any or all of the following options, which can be values or functions:
</p>
<pre><code style="background: none" class="javascript">
var options = {
//The radius of the clock
radius: function(){ return Math.min(self.canvas.height, self.canvas.width) / 2 },
//The width of the frame/rim
//To stop displaying rim, set this value to "none"
rim: function(){ return getValue("radius") * 0.2; },
//The colour of the frame/rim
rimColour: "rgba(0,0,0,0.1)",
//x position of centre of clock
x: function(){ return self.canvas.width / 2 },
//y position of centre of clock
y: function(){ return self.canvas.height / 2 },
//default colour of the clock
colour:"rgba(255,0,0,0.2)",
//the colour of the lines on the clock
lineColour: function(){ return self.options.colour; },
//the fill colour on the hands
fillColour: function(){ return self.options.colour; },
//default line width
lineWidth: 1,
//set to true to display the centre circle
centreCircle: true,
// radius of centre circle
centreCircleRadius: function(){ return getValue("radius") * 0.03; },
//colour of centre circle
centreCircleColour: function(){return getValue("colour");},
//radius of centre circle cutout
centreCircleCutout: function(){ return getValue("radius") * 0.01; },
//amount of hours to add to current time
addHours: 0,
//amount of minutes to add to current time
addMinutes: 0,
//amount of seconds to add to current time
addSeconds: 0,
//set to -1 to make the clock go anti-clockwise
directionCoefficient: 1,
//set type of marker for the hour points.
//"none" displays none
//"dot" displays dots
//"number" displays standard numbers
//"numeral" displays roman numerals
markerType: "none",
// set colour of hour point markers
markerColour: function(){ return self.options.colour; },
// set size of hour point markers
markerSize: function(){ return getValue("radius") * 0.02; },
// set distance from centre of clock to markers
markerDistance: function(){ return getValue("radius") * 0.9; },
//set to false to stop displaying markers.
markerDisplay: true,
}
var myClock = new clock("my-canvas", options);
myClock.start();
</pre></code>
<p>
By default the clock will fit to the parent container, so to set the size, just set the size of the element that contains the canvas.
</p>
<br />
<p>Here is how to add a small backwards clock in a div:</p>
<pre><code class="html">
<div class="small-clock"><canvas id="backwards-clock"></canvas></div>
<script>
var options = {
colour: "black",
rimColour:"black",
rim: 1,
directionCoefficient: -1,
markerType: "numeral"
}
var blackClock = new clock("backwards-clock", options);
blackClock.start();
</script>
<style>
.small-clock{
height: 100%;
width: 100%;
max-height: 200px;
max-width: 200px;
display:inline-block;
}
</style>
</code></pre>
<p>
And here is the result:
</p>
<div class="small-clock"><canvas id="backwards-clock"></canvas></div>
<script>
var blackClock = new clock("backwards-clock", {colour: "black", rimColour:"black", rim: 1,directionCoefficient: -1, markerType: "numeral"});
</script>
<h2>Changing the clock hands</h2>
<p>
The hands of the clock can be edited by accessing them through clock.hands after creating the clock.
</p>
<pre><code class="javascript">
myClock.hands.secondHand.length = 0.7
</code></pre>
<h2>Handle multiple clocks</h2>
<p>
Clock.js has a <i>clockMaker</i> object, which can be used to handle multiple clocks. It can be used like this:
</p>
<pre><code class="javascript">
var myClockMaker = new clockMaker();
myClockMaker.addClock(myClock1);
myClockMaker.addClock(myClock2);
myClockMaker.start();
</code></pre>
<p>
Clocks can also be added to the clockmaker through their IDs.
</p>
<pre><code class="html">
<canvas id="the-best-clock-in-the-world"></canvas>
myClockMaker.addClock("the-best-clock-in-the-world");
</code></pre>
<p>
Single clocks can be started or stopped by changing their <i>started</i> value inside the clockMaker, like this:
</p>
<pre><code class="javascript">
myClockMaker.clocks[1].started = false;
</code></pre>
<span id="performance-test">
<p>
To see how great the performance is with the <i>clockMaker</i>, please see <a class="inline-link" href="./test.html" target="_blank" alt="performance test with 200 clocks">this test</a> with 200 clocks with different times. Look at how smoothly they run!</a>
</p>
</span>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
<div class="panel-box">
<a href="/index.html" target="_blank" alt="The home of all the awesome things online!">By Michal Paszkiewicz</a>
</div>
</div>
<script>
var swatch = new clockMaker();
swatch.addClock(myClock);
swatch.addClock(blackClock);
swatch.start();
</script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>