Skip to content

Commit 6eca415

Browse files
tim-mittim-mit
committed
initial revision
0 parents  commit 6eca415

File tree

2 files changed

+251
-0
lines changed

2 files changed

+251
-0
lines changed

‎README.md

Whitespace-only changes.

‎css-clock.html

+251
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<style type="text/css">
5+
.clockface {
6+
height: 400px;
7+
width: 400px;
8+
margin-left: auto;
9+
margin-right: auto;
10+
border-radius: 50%;
11+
border-style: solid;
12+
border-color: #333;
13+
border-width: 10px;
14+
position: relative;
15+
}
16+
.seconds-hand {
17+
background-color: darkred;
18+
position: absolute;
19+
top: 200px;
20+
left: 200px;
21+
height: 3px;
22+
width: 200px;
23+
margin-top: -1px;
24+
margin-left: -10px;
25+
}
26+
.seconds-start {
27+
-webkit-animation-name: seconds-go;
28+
-webkit-animation-duration: 60000ms;
29+
-webkit-animation-iteration-count: infinite;
30+
-webkit-animation-timing-function: linear;
31+
32+
-moz-animation-name: seconds-go;
33+
-moz-animation-duration: 60000ms;
34+
-moz-animation-iteration-count: infinite;
35+
-moz-animation-timing-function: linear;
36+
37+
-ms-animation-name: seconds-go;
38+
-ms-animation-duration: 60000ms;
39+
-ms-animation-iteration-count: infinite;
40+
-ms-animation-timing-function: linear;
41+
42+
-o-animation-name: seconds-go;
43+
-o-animation-duration: 60000ms;
44+
-o-animation-iteration-count: infinite;
45+
-o-animation-timing-function: linear;
46+
}
47+
.minutes-hand {
48+
background-color: #333;
49+
position: absolute;
50+
top: 200px;
51+
left: 200px;
52+
height: 7px;
53+
width: 180px;
54+
margin-top: -3px;
55+
margin-left: -20px;
56+
}
57+
.minutes-start {
58+
-webkit-animation-name: minutes-go;
59+
-webkit-animation-duration: 3600000ms;
60+
-webkit-animation-iteration-count: infinite;
61+
-webkit-animation-timing-function: linear;
62+
63+
-moz-animation-name: minutes-go;
64+
-moz-animation-duration: 3600000ms;
65+
-moz-animation-iteration-count: infinite;
66+
-moz-animation-timing-function: linear;
67+
68+
-ms-animation-name: minutes-go;
69+
-ms-animation-duration: 3600000ms;
70+
-ms-animation-iteration-count: infinite;
71+
-ms-animation-timing-function: linear;
72+
73+
-o-animation-name: minutes-go;
74+
-o-animation-duration: 3600000ms;
75+
-o-animation-iteration-count: infinite;
76+
-o-animation-timing-function: linear;
77+
}
78+
.hours-hand {
79+
background-color: #333;
80+
position: absolute;
81+
top: 200px;
82+
left: 200px;
83+
height: 11px;
84+
width: 140px;
85+
margin-top: -5px;
86+
margin-left: -20px;
87+
}
88+
.hours-start {
89+
-webkit-animation-name: hours-go;
90+
-webkit-animation-duration: 43200000ms;
91+
-webkit-animation-iteration-count: infinite;
92+
-webkit-animation-timing-function: linear;
93+
94+
-moz-animation-name: hours-go;
95+
-moz-animation-duration: 43200000ms;
96+
-moz-animation-iteration-count: infinite;
97+
-moz-animation-timing-function: linear;
98+
99+
-ms-animation-name: hours-go;
100+
-ms-animation-duration: 43200000ms;
101+
-ms-animation-iteration-count: infinite;
102+
-ms-animation-timing-function: linear;
103+
104+
-o-animation-name: hours-go;
105+
-o-animation-duration: 43200000ms;
106+
-o-animation-iteration-count: infinite;
107+
-o-animation-timing-function: linear;
108+
}
109+
</style>
110+
</head>
111+
<body>
112+
<div class="clockface">
113+
<div class="hours-hand"></div>
114+
<div class="minutes-hand"></div>
115+
<div class="seconds-hand"></div>
116+
<div/>
117+
<script type="text/javascript">
118+
var Clockwork = (function () {
119+
120+
// helper to get dom element via class, returns array to
121+
// allow iteration
122+
function getClass (name) {
123+
var nodelist = document.getElementsByClassName(name),
124+
nodes = [],
125+
i = 0;
126+
127+
for (; i < nodelist.length; ++i)
128+
nodes[i] = nodelist[i];
129+
130+
return nodes;
131+
};
132+
133+
// add a browser specific css3 keyframe with the from/to
134+
// values which have been passed
135+
function setKeyframe (data) {
136+
var cssext = (function () {
137+
function testCSS(prop) {
138+
return prop in document.documentElement.style;
139+
};
140+
if (testCSS("MozBoxSizing"))
141+
return "-moz";
142+
if (testCSS("WebkitTransform"))
143+
return "-webkit";
144+
if (testCSS("msTransfor"))
145+
return "-ms";
146+
if (!!(window.opera && window.opera.version))
147+
return "-o";
148+
149+
return false;
150+
})(),
151+
rule = "",
152+
stylesheet = document.styleSheets[document.styleSheets.length - 1];
153+
154+
if (!cssext) return;
155+
156+
rule += "@" + cssext + "-keyframes " + data.name + " {\n\t" + "from {";
157+
data.from.forEach (function (val, i2, a2) {
158+
rule += "\n\t\t" + cssext + val + ";";
159+
});
160+
rule += "\n\t}\n\tto {";
161+
data.to.forEach (function (val, i3, a3) {
162+
rule += "\n\t\t" + cssext + val + ";";
163+
});
164+
rule += "\n\t}\n}"
165+
166+
stylesheet.insertRule(rule, stylesheet.cssRules.length);
167+
168+
};
169+
170+
function setSeconds () {
171+
var from = (new Date().getSeconds() * 6) - 90,
172+
to = (from + 360);
173+
174+
setKeyframe({
175+
"name" : "seconds-go",
176+
"from" : [
177+
"-transform: rotate(" + from + "deg)",
178+
"-transform-origin: 10px 1px"
179+
],
180+
"to" : [
181+
"-transform: rotate(" + to + "deg)",
182+
"-transform-origin: 10px 1px"
183+
]
184+
});
185+
186+
getClass("seconds-hand").forEach(function (el, idx, val) {
187+
el.className += " seconds-start";
188+
});
189+
};
190+
191+
function setMinutes () {
192+
var minutes = new Date().getMinutes(),
193+
from = (minutes * 6) - 90,
194+
to = (from + 360);
195+
196+
setKeyframe({
197+
"name" : "minutes-go",
198+
"from" : [
199+
"-transform: rotate(" + from + "deg)",
200+
"-transform-origin: 20px 3px"
201+
],
202+
"to" : [
203+
"-transform: rotate(" + to + "deg)",
204+
"-transform-origin: 20px 3px"
205+
]
206+
});
207+
208+
getClass("minutes-hand").forEach(function (el, idx, val) {
209+
el.className += " minutes-start";
210+
});
211+
212+
return minutes;
213+
};
214+
215+
// hour angle is a product of the minutes we are already through that
216+
// hour hence the requirement to pass through this value
217+
function setHours (minutes) {
218+
var hour = (hour = new Date().getHours()) > 12 ? (hour - 12) : hour,
219+
from = ((60 * hour + minutes) * 0.5) - 90,
220+
to = (from + 360);
221+
222+
setKeyframe({
223+
"name" : "hours-go",
224+
"from" : [
225+
"-transform: rotate(" + from + "deg)",
226+
"-transform-origin: 20px 5px"
227+
],
228+
"to" : [
229+
"-transform: rotate(" + to + "deg)",
230+
"-transform-origin: 20px 5px"
231+
]
232+
});
233+
234+
getClass("hours-hand").forEach(function (el, idx, val) {
235+
el.className += " hours-start";
236+
});
237+
238+
};
239+
240+
setSeconds();
241+
setHours(setMinutes());
242+
243+
// rewind periodically in case things have gone wrong...
244+
setInterval(function () {
245+
setSeconds();
246+
setHours(setMinutes());
247+
}, 600000);
248+
})();
249+
</script>
250+
</body>
251+
</html>

0 commit comments

Comments
 (0)