javascript-uhr-aus-viele-kleinen-uhren-mit-sekunden-anzeige.php


Quell 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>


Deprecated: Directive 'allow_url_include' is deprecated in Unknown on line 0