uhr aus vielen Uhren
Mal eine andere art eine Javascript Uhr zu erstellen
Der hier verwendete Code
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
background-color: #f2f2f2;
}
.pixel {
background-color:black;
border: 1px solid darkgrey;
border-radius: 50%;
-webkit-box-shadow: rgba(0,0,0,0.3) 0 2px 2px, inset rgba(0,0,0,0.1) 0 2px 2px;
box-shadow: rgba(0,0,0,0.3) 0 2px 2px, inset rgba(0,0,0,0.1) 0 2px 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
height: 38px;
overflow: hidden;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 38px;
}
.hand {
left: 16px;
position: absolute; color:red;background:black;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 500ms ease-in-out;
transition: -webkit-transform 500ms ease-in-out;
transition: transform 500ms ease-in-out;
transition: transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
width: 2px;
}
.hand_hour {
height: 12px; width:4px;
top: 6px; color:red;background:white;
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
-webkit-transform-origin: 50% 97%;
transform-origin: 50% 97%;
}
.hand_minute {
height: 16px;
width:4px;
top: 2px;
color:red;background:white;
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
-webkit-transform-origin: 50% 97%;
transform-origin: 50% 97%;
}
.number {
display: inline-block;
height: 230px;
margin: 8px;
overflow: hidden;
width: 310px;
}
.digit {
display: inline-block;
height: 228px;
line-height: 0;
position: relative;
width: 152px;
}
.digit_0 .pixel:nth-child(1) .hand_hour,
.digit_0 .pixel:nth-child(6) .hand_hour {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_0 .pixel:nth-child(1) .hand_minute,
.digit_0 .pixel:nth-child(6) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_0 .pixel:nth-child(2) .hand_hour,
.digit_0 .pixel:nth-child(3) .hand_hour,
.digit_0 .pixel:nth-child(22) .hand_hour,
.digit_0 .pixel:nth-child(23) .hand_hour {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_0 .pixel:nth-child(2) .hand_minute,
.digit_0 .pixel:nth-child(3) .hand_minute,
.digit_0 .pixel:nth-child(22) .hand_minute,
.digit_0 .pixel:nth-child(23) .hand_minute {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_0 .pixel:nth-child(4) .hand_hour,
.digit_0 .pixel:nth-child(7) .hand_hour {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_0 .pixel:nth-child(4) .hand_minute,
.digit_0 .pixel:nth-child(7) .hand_minute {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_0 .pixel:nth-child(5) .hand_hour,
.digit_0 .pixel:nth-child(8) .hand_hour,
.digit_0 .pixel:nth-child(9) .hand_hour,
.digit_0 .pixel:nth-child(10) .hand_hour,
.digit_0 .pixel:nth-child(11) .hand_hour,
.digit_0 .pixel:nth-child(12) .hand_hour,
.digit_0 .pixel:nth-child(13) .hand_hour,
.digit_0 .pixel:nth-child(14) .hand_hour,
.digit_0 .pixel:nth-child(15) .hand_hour,
.digit_0 .pixel:nth-child(16) .hand_hour,
.digit_0 .pixel:nth-child(17) .hand_hour,
.digit_0 .pixel:nth-child(20) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_0 .pixel:nth-child(5) .hand_minute,
.digit_0 .pixel:nth-child(8) .hand_minute,
.digit_0 .pixel:nth-child(9) .hand_minute,
.digit_0 .pixel:nth-child(10) .hand_minute,
.digit_0 .pixel:nth-child(11) .hand_minute,
.digit_0 .pixel:nth-child(12) .hand_minute,
.digit_0 .pixel:nth-child(13) .hand_minute,
.digit_0 .pixel:nth-child(14) .hand_minute,
.digit_0 .pixel:nth-child(15) .hand_minute,
.digit_0 .pixel:nth-child(16) .hand_minute,
.digit_0 .pixel:nth-child(17) .hand_minute,
.digit_0 .pixel:nth-child(20) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_0 .pixel:nth-child(18) .hand_hour,
.digit_0 .pixel:nth-child(21) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_0 .pixel:nth-child(18) .hand_minute,
.digit_0 .pixel:nth-child(21) .hand_minute {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_0 .pixel:nth-child(19) .hand_hour,
.digit_0 .pixel:nth-child(24) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_0 .pixel:nth-child(19) .hand_minute,
.digit_0 .pixel:nth-child(24) .hand_minute {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_1 .pixel:nth-child(1) .hand_hour,
.digit_1 .pixel:nth-child(17) .hand_hour {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_1 .pixel:nth-child(1) .hand_minute,
.digit_1 .pixel:nth-child(17) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_1 .pixel:nth-child(2) .hand_hour,
.digit_1 .pixel:nth-child(22) .hand_hour,
.digit_1 .pixel:nth-child(23) .hand_hour {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_1 .pixel:nth-child(2) .hand_minute,
.digit_1 .pixel:nth-child(22) .hand_minute,
.digit_1 .pixel:nth-child(23) .hand_minute {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_1 .pixel:nth-child(3) .hand_hour,
.digit_1 .pixel:nth-child(6) .hand_hour,
.digit_1 .pixel:nth-child(20) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_1 .pixel:nth-child(3) .hand_minute,
.digit_1 .pixel:nth-child(6) .hand_minute,
.digit_1 .pixel:nth-child(20) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_1 .pixel:nth-child(4) .hand_hour,
.digit_1 .pixel:nth-child(8) .hand_hour,
.digit_1 .pixel:nth-child(9) .hand_hour,
.digit_1 .pixel:nth-child(12) .hand_hour,
.digit_1 .pixel:nth-child(13) .hand_hour,
.digit_1 .pixel:nth-child(16) .hand_hour {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.digit_1 .pixel:nth-child(4) .hand_minute,
.digit_1 .pixel:nth-child(8) .hand_minute,
.digit_1 .pixel:nth-child(9) .hand_minute,
.digit_1 .pixel:nth-child(12) .hand_minute,
.digit_1 .pixel:nth-child(13) .hand_minute,
.digit_1 .pixel:nth-child(16) .hand_minute {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.digit_1 .pixel:nth-child(5) .hand_hour,
.digit_1 .pixel:nth-child(19) .hand_hour,
.digit_1 .pixel:nth-child(21) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_1 .pixel:nth-child(5) .hand_minute,
.digit_1 .pixel:nth-child(19) .hand_minute,
.digit_1 .pixel:nth-child(21) .hand_minute {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_1 .pixel:nth-child(7) .hand_hour,
.digit_1 .pixel:nth-child(10) .hand_hour,
.digit_1 .pixel:nth-child(11) .hand_hour,
.digit_1 .pixel:nth-child(14) .hand_hour,
.digit_1 .pixel:nth-child(15) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_1 .pixel:nth-child(7) .hand_minute,
.digit_1 .pixel:nth-child(10) .hand_minute,
.digit_1 .pixel:nth-child(11) .hand_minute,
.digit_1 .pixel:nth-child(14) .hand_minute,
.digit_1 .pixel:nth-child(15) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_1 .pixel:nth-child(18) .hand_hour,
.digit_1 .pixel:nth-child(24) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_1 .pixel:nth-child(18) .hand_minute,
.digit_1 .pixel:nth-child(24) .hand_minute {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_2 .pixel:nth-child(1) .hand_hour,
.digit_2 .pixel:nth-child(9) .hand_hour,
.digit_2 .pixel:nth-child(14) .hand_hour {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_2 .pixel:nth-child(1) .hand_minute,
.digit_2 .pixel:nth-child(9) .hand_minute,
.digit_2 .pixel:nth-child(14) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_2 .pixel:nth-child(2) .hand_hour,
.digit_2 .pixel:nth-child(3) .hand_hour,
.digit_2 .pixel:nth-child(6) .hand_hour,
.digit_2 .pixel:nth-child(10) .hand_hour,
.digit_2 .pixel:nth-child(15) .hand_hour,
.digit_2 .pixel:nth-child(19) .hand_hour,
.digit_2 .pixel:nth-child(22) .hand_hour,
.digit_2 .pixel:nth-child(23) .hand_hour {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_2 .pixel:nth-child(2) .hand_minute,
.digit_2 .pixel:nth-child(3) .hand_minute,
.digit_2 .pixel:nth-child(6) .hand_minute,
.digit_2 .pixel:nth-child(10) .hand_minute,
.digit_2 .pixel:nth-child(15) .hand_minute,
.digit_2 .pixel:nth-child(19) .hand_minute,
.digit_2 .pixel:nth-child(22) .hand_minute,
.digit_2 .pixel:nth-child(23) .hand_minute {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_2 .pixel:nth-child(4) .hand_hour,
.digit_2 .pixel:nth-child(7) .hand_hour,
.digit_2 .pixel:nth-child(20) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_2 .pixel:nth-child(4) .hand_minute,
.digit_2 .pixel:nth-child(7) .hand_minute,
.digit_2 .pixel:nth-child(20) .hand_minute {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.digit_2 .pixel:nth-child(5) .hand_hour,
.digit_2 .pixel:nth-child(18) .hand_hour,
.digit_2 .pixel:nth-child(21) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_2 .pixel:nth-child(5) .hand_minute,
.digit_2 .pixel:nth-child(18) .hand_minute,
.digit_2 .pixel:nth-child(21) .hand_minute {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_2 .pixel:nth-child(8) .hand_hour,
.digit_2 .pixel:nth-child(12) .hand_hour,
.digit_2 .pixel:nth-child(13) .hand_hour,
.digit_2 .pixel:nth-child(17) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_2 .pixel:nth-child(8) .hand_minute,
.digit_2 .pixel:nth-child(12) .hand_minute,
.digit_2 .pixel:nth-child(13) .hand_minute,
.digit_2 .pixel:nth-child(17) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_2 .pixel:nth-child(11) .hand_hour,
.digit_2 .pixel:nth-child(16) .hand_hour,
.digit_2 .pixel:nth-child(24) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_2 .pixel:nth-child(11) .hand_minute,
.digit_2 .pixel:nth-child(16) .hand_minute,
.digit_2 .pixel:nth-child(24) .hand_minute {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_3 .pixel:nth-child(1) .hand_hour,
.digit_3 .pixel:nth-child(10) .hand_hour,
.digit_3 .pixel:nth-child(17) .hand_hour {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_3 .pixel:nth-child(1) .hand_minute,
.digit_3 .pixel:nth-child(10) .hand_minute,
.digit_3 .pixel:nth-child(17) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_3 .pixel:nth-child(2) .hand_hour,
.digit_3 .pixel:nth-child(3) .hand_hour,
.digit_3 .pixel:nth-child(6) .hand_hour,
.digit_3 .pixel:nth-child(18) .hand_hour,
.digit_3 .pixel:nth-child(22) .hand_hour,
.digit_3 .pixel:nth-child(23) .hand_hour {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_3 .pixel:nth-child(2) .hand_minute,
.digit_3 .pixel:nth-child(3) .hand_minute,
.digit_3 .pixel:nth-child(6) .hand_minute,
.digit_3 .pixel:nth-child(18) .hand_minute,
.digit_3 .pixel:nth-child(22) .hand_minute,
.digit_3 .pixel:nth-child(23) .hand_minute {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_3 .pixel:nth-child(4) .hand_hour,
.digit_3 .pixel:nth-child(7) .hand_hour,
.digit_3 .pixel:nth-child(15) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_3 .pixel:nth-child(4) .hand_minute,
.digit_3 .pixel:nth-child(7) .hand_minute,
.digit_3 .pixel:nth-child(15) .hand_minute {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.digit_3 .pixel:nth-child(5) .hand_hour,
.digit_3 .pixel:nth-child(14) .hand_hour,
.digit_3 .pixel:nth-child(21) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_3 .pixel:nth-child(5) .hand_minute,
.digit_3 .pixel:nth-child(14) .hand_minute,
.digit_3 .pixel:nth-child(21) .hand_minute {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_3 .pixel:nth-child(8) .hand_hour,
.digit_3 .pixel:nth-child(12) .hand_hour,
.digit_3 .pixel:nth-child(16) .hand_hour,
.digit_3 .pixel:nth-child(20) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_3 .pixel:nth-child(8) .hand_minute,
.digit_3 .pixel:nth-child(12) .hand_minute,
.digit_3 .pixel:nth-child(16) .hand_minute,
.digit_3 .pixel:nth-child(20) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_3 .pixel:nth-child(11) .hand_hour,
.digit_3 .pixel:nth-child(19) .hand_hour,
.digit_3 .pixel:nth-child(24) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_3 .pixel:nth-child(11) .hand_minute,
.digit_3 .pixel:nth-child(19) .hand_minute,
.digit_3 .pixel:nth-child(24) .hand_minute {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_3 .pixel:nth-child(9) .hand_hour,
.digit_3 .pixel:nth-child(13) .hand_hour {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.digit_3 .pixel:nth-child(9) .hand_minute,
.digit_3 .pixel:nth-child(13) .hand_minute {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.digit_4 .pixel:nth-child(1) .hand_hour,
.digit_4 .pixel:nth-child(3) .hand_hour {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_4 .pixel:nth-child(1) .hand_minute,
.digit_4 .pixel:nth-child(3) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_4 .pixel:nth-child(2) .hand_hour,
.digit_4 .pixel:nth-child(4) .hand_hour,
.digit_4 .pixel:nth-child(15) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_4 .pixel:nth-child(2) .hand_minute,
.digit_4 .pixel:nth-child(4) .hand_minute,
.digit_4 .pixel:nth-child(15) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_4 .pixel:nth-child(5) .hand_hour,
.digit_4 .pixel:nth-child(6) .hand_hour,
.digit_4 .pixel:nth-child(7) .hand_hour,
.digit_4 .pixel:nth-child(8) .hand_hour,
.digit_4 .pixel:nth-child(9) .hand_hour,
.digit_4 .pixel:nth-child(12) .hand_hour,
.digit_4 .pixel:nth-child(16) .hand_hour,
.digit_4 .pixel:nth-child(19) .hand_hour,
.digit_4 .pixel:nth-child(20) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_4 .pixel:nth-child(5) .hand_minute,
.digit_4 .pixel:nth-child(6) .hand_minute,
.digit_4 .pixel:nth-child(7) .hand_minute,
.digit_4 .pixel:nth-child(8) .hand_minute,
.digit_4 .pixel:nth-child(9) .hand_minute,
.digit_4 .pixel:nth-child(12) .hand_minute,
.digit_4 .pixel:nth-child(16) .hand_minute,
.digit_4 .pixel:nth-child(19) .hand_minute,
.digit_4 .pixel:nth-child(20) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_4 .pixel:nth-child(10) .hand_hour,
.digit_4 .pixel:nth-child(13) .hand_hour,
.digit_4 .pixel:nth-child(23) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_4 .pixel:nth-child(10) .hand_minute,
.digit_4 .pixel:nth-child(13) .hand_minute,
.digit_4 .pixel:nth-child(23) .hand_minute {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_4 .pixel:nth-child(11) .hand_hour,
.digit_4 .pixel:nth-child(24) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_4 .pixel:nth-child(11) .hand_minute,
.digit_4 .pixel:nth-child(24) .hand_minute {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_4 .pixel:nth-child(14) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_4 .pixel:nth-child(14) .hand_minute {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_4 .pixel:nth-child(17) .hand_hour,
.digit_4 .pixel:nth-child(18) .hand_hour,
.digit_4 .pixel:nth-child(21) .hand_hour,
.digit_4 .pixel:nth-child(22) .hand_hour {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.digit_4 .pixel:nth-child(17) .hand_minute,
.digit_4 .pixel:nth-child(18) .hand_minute,
.digit_4 .pixel:nth-child(21) .hand_minute,
.digit_4 .pixel:nth-child(22) .hand_minute {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.digit_5 .pixel:nth-child(1) .hand_hour,
.digit_5 .pixel:nth-child(6) .hand_hour,
.digit_5 .pixel:nth-child(17) .hand_hour {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_5 .pixel:nth-child(1) .hand_minute,
.digit_5 .pixel:nth-child(6) .hand_minute,
.digit_5 .pixel:nth-child(17) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_5 .pixel:nth-child(2) .hand_hour,
.digit_5 .pixel:nth-child(3) .hand_hour,
.digit_5 .pixel:nth-child(7) .hand_hour,
.digit_5 .pixel:nth-child(11) .hand_hour,
.digit_5 .pixel:nth-child(14) .hand_hour,
.digit_5 .pixel:nth-child(18) .hand_hour,
.digit_5 .pixel:nth-child(22) .hand_hour,
.digit_5 .pixel:nth-child(23) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_5 .pixel:nth-child(2) .hand_minute,
.digit_5 .pixel:nth-child(3) .hand_minute,
.digit_5 .pixel:nth-child(7) .hand_minute,
.digit_5 .pixel:nth-child(11) .hand_minute,
.digit_5 .pixel:nth-child(14) .hand_minute,
.digit_5 .pixel:nth-child(18) .hand_minute,
.digit_5 .pixel:nth-child(22) .hand_minute,
.digit_5 .pixel:nth-child(23) .hand_minute {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_5 .pixel:nth-child(4) .hand_hour,
.digit_5 .pixel:nth-child(12) .hand_hour,
.digit_5 .pixel:nth-child(15) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_5 .pixel:nth-child(4) .hand_minute,
.digit_5 .pixel:nth-child(12) .hand_minute,
.digit_5 .pixel:nth-child(15) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_5 .pixel:nth-child(5) .hand_hour,
.digit_5 .pixel:nth-child(9) .hand_hour,
.digit_5 .pixel:nth-child(16) .hand_hour,
.digit_5 .pixel:nth-child(20) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_5 .pixel:nth-child(5) .hand_minute,
.digit_5 .pixel:nth-child(9) .hand_minute,
.digit_5 .pixel:nth-child(16) .hand_minute,
.digit_5 .pixel:nth-child(20) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_5 .pixel:nth-child(8) .hand_hour,
.digit_5 .pixel:nth-child(19) .hand_hour,
.digit_5 .pixel:nth-child(24) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_5 .pixel:nth-child(8) .hand_minute,
.digit_5 .pixel:nth-child(19) .hand_minute,
.digit_5 .pixel:nth-child(24) .hand_minute {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_5 .pixel:nth-child(10) .hand_hour,
.digit_5 .pixel:nth-child(13) .hand_hour,
.digit_5 .pixel:nth-child(21) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_5 .pixel:nth-child(10) .hand_minute,
.digit_5 .pixel:nth-child(13) .hand_minute,
.digit_5 .pixel:nth-child(21) .hand_minute {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_6 .pixel:nth-child(1) .hand_hour,
.digit_6 .pixel:nth-child(6) .hand_hour,
.digit_6 .pixel:nth-child(14) .hand_hour {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_6 .pixel:nth-child(1) .hand_minute,
.digit_6 .pixel:nth-child(6) .hand_minute,
.digit_6 .pixel:nth-child(14) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_6 .pixel:nth-child(2) .hand_hour,
.digit_6 .pixel:nth-child(3) .hand_hour,
.digit_6 .pixel:nth-child(7) .hand_hour,
.digit_6 .pixel:nth-child(11) .hand_hour,
.digit_6 .pixel:nth-child(22) .hand_hour,
.digit_6 .pixel:nth-child(23) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_6 .pixel:nth-child(2) .hand_minute,
.digit_6 .pixel:nth-child(3) .hand_minute,
.digit_6 .pixel:nth-child(7) .hand_minute,
.digit_6 .pixel:nth-child(11) .hand_minute,
.digit_6 .pixel:nth-child(22) .hand_minute,
.digit_6 .pixel:nth-child(23) .hand_minute {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_6 .pixel:nth-child(4) .hand_hour,
.digit_6 .pixel:nth-child(12) .hand_hour,
.digit_6 .pixel:nth-child(15) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_6 .pixel:nth-child(4) .hand_minute,
.digit_6 .pixel:nth-child(12) .hand_minute,
.digit_6 .pixel:nth-child(15) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_6 .pixel:nth-child(5) .hand_hour,
.digit_6 .pixel:nth-child(9) .hand_hour,
.digit_6 .pixel:nth-child(13) .hand_hour,
.digit_6 .pixel:nth-child(16) .hand_hour,
.digit_6 .pixel:nth-child(17) .hand_hour,
.digit_6 .pixel:nth-child(20) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_6 .pixel:nth-child(5) .hand_minute,
.digit_6 .pixel:nth-child(9) .hand_minute,
.digit_6 .pixel:nth-child(13) .hand_minute,
.digit_6 .pixel:nth-child(16) .hand_minute,
.digit_6 .pixel:nth-child(17) .hand_minute,
.digit_6 .pixel:nth-child(20) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_6 .pixel:nth-child(10) .hand_hour,
.digit_6 .pixel:nth-child(18) .hand_hour,
.digit_6 .pixel:nth-child(21) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_6 .pixel:nth-child(10) .hand_minute,
.digit_6 .pixel:nth-child(18) .hand_minute,
.digit_6 .pixel:nth-child(21) .hand_minute {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_6 .pixel:nth-child(8) .hand_hour,
.digit_6 .pixel:nth-child(19) .hand_hour,
.digit_6 .pixel:nth-child(24) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_6 .pixel:nth-child(8) .hand_minute,
.digit_6 .pixel:nth-child(19) .hand_minute,
.digit_6 .pixel:nth-child(24) .hand_minute {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_7 .pixel:nth-child(1) .hand_hour {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_7 .pixel:nth-child(1) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_7 .pixel:nth-child(2) .hand_hour,
.digit_7 .pixel:nth-child(3) .hand_hour,
.digit_7 .pixel:nth-child(6) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_7 .pixel:nth-child(2) .hand_minute,
.digit_7 .pixel:nth-child(3) .hand_minute,
.digit_7 .pixel:nth-child(6) .hand_minute {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_7 .pixel:nth-child(4) .hand_hour,
.digit_7 .pixel:nth-child(7) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_7 .pixel:nth-child(4) .hand_minute,
.digit_7 .pixel:nth-child(7) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_7 .pixel:nth-child(5) .hand_hour,
.digit_7 .pixel:nth-child(23) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_7 .pixel:nth-child(5) .hand_minute,
.digit_7 .pixel:nth-child(23) .hand_minute {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_7 .pixel:nth-child(8) .hand_hour,
.digit_7 .pixel:nth-child(11) .hand_hour,
.digit_7 .pixel:nth-child(12) .hand_hour,
.digit_7 .pixel:nth-child(15) .hand_hour,
.digit_7 .pixel:nth-child(16) .hand_hour,
.digit_7 .pixel:nth-child(19) .hand_hour,
.digit_7 .pixel:nth-child(20) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_7 .pixel:nth-child(8) .hand_minute,
.digit_7 .pixel:nth-child(11) .hand_minute,
.digit_7 .pixel:nth-child(12) .hand_minute,
.digit_7 .pixel:nth-child(15) .hand_minute,
.digit_7 .pixel:nth-child(16) .hand_minute,
.digit_7 .pixel:nth-child(19) .hand_minute,
.digit_7 .pixel:nth-child(20) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_7 .pixel:nth-child(24) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_7 .pixel:nth-child(24) .hand_minute {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_7 .pixel:nth-child(9) .hand_hour,
.digit_7 .pixel:nth-child(10) .hand_hour,
.digit_7 .pixel:nth-child(13) .hand_hour,
.digit_7 .pixel:nth-child(14) .hand_hour,
.digit_7 .pixel:nth-child(17) .hand_hour,
.digit_7 .pixel:nth-child(18) .hand_hour,
.digit_7 .pixel:nth-child(21) .hand_hour,
.digit_7 .pixel:nth-child(22) .hand_hour {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.digit_7 .pixel:nth-child(9) .hand_minute,
.digit_7 .pixel:nth-child(10) .hand_minute,
.digit_7 .pixel:nth-child(13) .hand_minute,
.digit_7 .pixel:nth-child(14) .hand_minute,
.digit_7 .pixel:nth-child(17) .hand_minute,
.digit_7 .pixel:nth-child(18) .hand_minute,
.digit_7 .pixel:nth-child(21) .hand_minute,
.digit_7 .pixel:nth-child(22) .hand_minute {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.digit_8 .pixel:nth-child(1) .hand_hour,
.digit_8 .pixel:nth-child(6) .hand_hour,
.digit_8 .pixel:nth-child(14) .hand_hour {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_8 .pixel:nth-child(1) .hand_minute,
.digit_8 .pixel:nth-child(6) .hand_minute,
.digit_8 .pixel:nth-child(14) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_8 .pixel:nth-child(2) .hand_hour,
.digit_8 .pixel:nth-child(3) .hand_hour,
.digit_8 .pixel:nth-child(22) .hand_hour,
.digit_8 .pixel:nth-child(23) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_8 .pixel:nth-child(2) .hand_minute,
.digit_8 .pixel:nth-child(3) .hand_minute,
.digit_8 .pixel:nth-child(22) .hand_minute,
.digit_8 .pixel:nth-child(23) .hand_minute {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_8 .pixel:nth-child(4) .hand_hour,
.digit_8 .pixel:nth-child(7) .hand_hour,
.digit_8 .pixel:nth-child(15) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_8 .pixel:nth-child(4) .hand_minute,
.digit_8 .pixel:nth-child(7) .hand_minute,
.digit_8 .pixel:nth-child(15) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_8 .pixel:nth-child(5) .hand_hour,
.digit_8 .pixel:nth-child(8) .hand_hour,
.digit_8 .pixel:nth-child(9) .hand_hour,
.digit_8 .pixel:nth-child(12) .hand_hour,
.digit_8 .pixel:nth-child(13) .hand_hour,
.digit_8 .pixel:nth-child(16) .hand_hour,
.digit_8 .pixel:nth-child(17) .hand_hour,
.digit_8 .pixel:nth-child(20) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_8 .pixel:nth-child(5) .hand_minute,
.digit_8 .pixel:nth-child(8) .hand_minute,
.digit_8 .pixel:nth-child(9) .hand_minute,
.digit_8 .pixel:nth-child(12) .hand_minute,
.digit_8 .pixel:nth-child(13) .hand_minute,
.digit_8 .pixel:nth-child(16) .hand_minute,
.digit_8 .pixel:nth-child(17) .hand_minute,
.digit_8 .pixel:nth-child(20) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_8 .pixel:nth-child(10) .hand_hour,
.digit_8 .pixel:nth-child(18) .hand_hour,
.digit_8 .pixel:nth-child(21) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_8 .pixel:nth-child(10) .hand_minute,
.digit_8 .pixel:nth-child(18) .hand_minute,
.digit_8 .pixel:nth-child(21) .hand_minute {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_8 .pixel:nth-child(11) .hand_hour,
.digit_8 .pixel:nth-child(19) .hand_hour,
.digit_8 .pixel:nth-child(24) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_8 .pixel:nth-child(11) .hand_minute,
.digit_8 .pixel:nth-child(19) .hand_minute,
.digit_8 .pixel:nth-child(24) .hand_minute {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_9 .pixel:nth-child(1) .hand_hour,
.digit_9 .pixel:nth-child(6) .hand_hour,
.digit_9 .pixel:nth-child(17) .hand_hour {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_9 .pixel:nth-child(1) .hand_minute,
.digit_9 .pixel:nth-child(6) .hand_minute,
.digit_9 .pixel:nth-child(17) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_9 .pixel:nth-child(2) .hand_hour,
.digit_9 .pixel:nth-child(3) .hand_hour,
.digit_9 .pixel:nth-child(14) .hand_hour,
.digit_9 .pixel:nth-child(18) .hand_hour,
.digit_9 .pixel:nth-child(22) .hand_hour,
.digit_9 .pixel:nth-child(23) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_9 .pixel:nth-child(2) .hand_minute,
.digit_9 .pixel:nth-child(3) .hand_minute,
.digit_9 .pixel:nth-child(14) .hand_minute,
.digit_9 .pixel:nth-child(18) .hand_minute,
.digit_9 .pixel:nth-child(22) .hand_minute,
.digit_9 .pixel:nth-child(23) .hand_minute {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_9 .pixel:nth-child(4) .hand_hour,
.digit_9 .pixel:nth-child(7) .hand_hour,
.digit_9 .pixel:nth-child(15) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_9 .pixel:nth-child(4) .hand_minute,
.digit_9 .pixel:nth-child(7) .hand_minute,
.digit_9 .pixel:nth-child(15) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_9 .pixel:nth-child(5) .hand_hour,
.digit_9 .pixel:nth-child(8) .hand_hour,
.digit_9 .pixel:nth-child(9) .hand_hour,
.digit_9 .pixel:nth-child(12) .hand_hour,
.digit_9 .pixel:nth-child(16) .hand_hour,
.digit_9 .pixel:nth-child(20) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_9 .pixel:nth-child(5) .hand_minute,
.digit_9 .pixel:nth-child(8) .hand_minute,
.digit_9 .pixel:nth-child(9) .hand_minute,
.digit_9 .pixel:nth-child(12) .hand_minute,
.digit_9 .pixel:nth-child(16) .hand_minute,
.digit_9 .pixel:nth-child(20) .hand_minute {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.digit_9 .pixel:nth-child(10) .hand_hour,
.digit_9 .pixel:nth-child(13) .hand_hour,
.digit_9 .pixel:nth-child(21) .hand_hour {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.digit_9 .pixel:nth-child(10) .hand_minute,
.digit_9 .pixel:nth-child(13) .hand_minute,
.digit_9 .pixel:nth-child(21) .hand_minute {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.digit_9 .pixel:nth-child(11) .hand_hour,
.digit_9 .pixel:nth-child(19) .hand_hour,
.digit_9 .pixel:nth-child(24) .hand_hour {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.digit_9 .pixel:nth-child(11) .hand_minute,
.digit_9 .pixel:nth-child(19) .hand_minute,
.digit_9 .pixel:nth-child(24) .hand_minute {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
</style>
<div id="clock"></div>
<script>
(function (window) {
'use strict';
var Digit = (function () {
var Digit = function (container) {
this.container = container;
};
Digit.prototype.setDigit = function (digit) {
digit = digit + '';
if (this.digit === digit) {
return;
}
this.digit = digit;
this.container.className = 'digit digit_' + digit;
};
return Digit;
})();
var template = (function () {
function clockTemplate () {
return ['<div class="pixel">',
'<div class="hand hand_hour"></div>',
'<div class="hand hand_minute"></div>',
'</div>'
].join('');
}
function digitTemplate () {
var result = ['<div class="digit">'];
for (var i = 0; i < 24; i++) {
result.push(clockTemplate());
}
result.push('</div>');
return result.join('');
}
function numberTemplate () {
return [
'<div class="number">',
digitTemplate(),
digitTemplate(),
'</div>'
].join('');
}
return function () {
return [
numberTemplate(),
numberTemplate(),
numberTemplate()
].join('');
};
})();
var start = (function () {
var _digits, prevSeconds;
function getDigits (num) {
return ((num > 9 ? '' : '0') + num).split('');
}
function update (date, seconds) {
var digitsList = [];
digitsList = digitsList.concat(getDigits(date.getHours()));
digitsList = digitsList.concat(getDigits(date.getMinutes()));
digitsList = digitsList.concat(getDigits(seconds));
digitsList.forEach(function (digit, index) {
_digits[index].setDigit(digit);
});
}
function tick () {
var now = new Date();
var seconds = now.getSeconds();
if (seconds !== prevSeconds) {
prevSeconds = seconds;
update(now, seconds);
}
setTimeout(tick, 100);
}
return function (digits) {
_digits = digits;
tick();
};
})();
// entry point
function init () {
var cont = document.querySelector('#clock');
cont.innerHTML = template();
var digits = Array.prototype.slice.call(cont.querySelectorAll('.digit'))
.map(function (cont) {
return new Digit(cont);
});
// A fancy timeout
setTimeout(start.bind(null, digits), 1000);
}
window.addEventListener('load', init);
})(window);
</script>
</html>