Ajax Loader
HTML 
<div id="clockclock" ></div>
1
<div id="clockclock" ></div>
 
CSS 
x
54
1
 
2
.needle{
3
    position: absolute;
4
    top: 50%;
5
    left:50%;
6
    background-color:#0cf;
7
    height:10%;
8
    margin: -5% 0 0 -5%;  
9
    transform-origin: 5% center;
10
    -moz-transform-origin: 5% center;
11
    -webkit-transform-origin: 5% center;
12
    -o-transform-origin: 5% center;
13
    transition-duration: 1s;
14
    -webkit-transition-duration: 1s;
15
    -moz-transition-duration: 1s;
16
    -o-transition-duration: 1s;
17
    border-radius: 5px;
18
    -moz-border-radius: 5px;
19
    -webkit-border-radius: 5px;
20
    -o-border-radius: 5px;
21
 
22
}
23
24
.long { width: 50%;}
25
.short { width: 40%;}
26
 
27
.clock
28
{
29
  float:left;
30
  position:relative;
31
  height: 31%;
32
  width: 44%;
33
  border: 1px solid #ddd;
34
  -moz-border-radius: 50%;
35
  -webkit-border-radius: 50%;
36
  -o-border-radius: 50%;
37
  border-radius: 50%;
38
  background-color:#fff;
39
 
40
}
41
 
42
.block{
43
  position:relative;
44
  float:left;
45
  height:50%;
46
  width:16.6%;
47
48
}
49
50
#clockclock
51
{
52
  position:absolute;
53
  top:50%;
54
}
 
JavaScript 
// forked from Kezako's "The clock clock" http://jsdo.it/Kezako/pgDh
1
// forked from Kezako's "The clock clock" http://jsdo.it/Kezako/pgDh
2
 
3
var digitsArray = [
4
          [2,0 , 2,4 , 6,2 , 6,2 , 6,0 , 6,4] , //0
5
          [9,9 , 4,2 , 9,9 , 6,2 , 9,9 , 6,6] , //1
6
          [0,0 , 4,2 , 0,2 , 6,4 , 6,0 , 4,4] , //2
7
          [0,0 , 4,2 , 0,0 , 4,6 , 0,0 , 4,6] , //3
8
          [2,2 , 2,2 , 6,0 , 4,6 , 9,9 , 6,6] , //4
9
          [2,0 , 4,4 , 6,0 , 2,4 , 0,0 , 4,6] , //5
10
          [2,0 , 4,4 , 6,2 , 2,4 , 6,0 , 4,6] , //6
11
          [0,0 , 4,2 , 9,9 , 6,2 , 9,9 , 6,6] , //7
12
          [0,2 , 4,2 , 6,0 , 6,4 , 0,6 , 4,6] , //8
13
          [0,2 , 4,2 , 6,0 , 6,2 , 0,0 , 6,4]]; //9    
14
 
15
var clockContainer = document.getElementById("clockclock");
16
 
17
function resizeContainer()
18
{
19
  clockContainer.style.width = document.body.clientWidth+"px";
20
  clockContainer.style.height = Math.floor(document.body.clientWidth*0.5)+"px";
21
  clockContainer.style.marginTop = Math.floor(-0.25*document.body.clientWidth)+"px";
22
}
23
 
24
window.onresize = resizeContainer;
25
resizeContainer();
26
 
27
function Clock()
28
{
29
  this.node = document.createElement("div");
30
  this.node.setAttribute("class","clock");
31
  
32
  this.setNeedle = function(n, pos) {      
33
        if(pos==9){
34
            this.needles[n].setAttribute("style","background-color:#eee;");          
35
        } else {
36
          var angle = pos*45+"deg";
37
          this.needles[n].setAttribute("style","-webkit-transform: rotate("+angle+"); -moz-transform: rotate("+angle+"); transform: rotate("+angle+")");
38
        }
39
    };
40
41
  this.needles=[];
42
  for(var n=0; n<2; n++) //2 needles per clock
43
  {
44
    var needle = document.createElement("div");
45
    needle.setAttribute("class","needle "+(n===0?"short":"long"));
46
    this.needles.push(needle);
47
    this.node.appendChild(needle);
48
    this.setNeedle(n,9);
49
  }
50
  
51
}
52
 
53
function Block()
54
{
55
  this.digits = [];
56
57
 this.set = function(n)
58
  {
59
    var u=n%10, d=(n-u)/10;
60
    for(var c=0;c<6;c++)
61
    {
62
      this.clocks[c].setNeedle(0,digitsArray[d][2*c]);
63
      this.clocks[c].setNeedle(1,digitsArray[d][2*c+1]);
64
      this.clocks[6+c].setNeedle(0,digitsArray[u][2*c]);
65
      this.clocks[6+c].setNeedle(1,digitsArray[u][2*c+1]);
66
    }
67
  };
68
69
  this.clocks = [];
70
  for(var d=0; d<2; d++) //2 digits per block
71
  {
72
    var digit = document.createElement("div");
73
    digit.setAttribute("class","block");
74
    this.digits.push(digit);
75
    for(var c=0; c<6; c++)
76
    {
77
      var clock = new Clock();
78
      this.clocks.push(clock);
79
      digit.appendChild(clock.node);
80
    }
81
    clockContainer.appendChild(digit);
82
  }
83
84
}
85
 
86
function ClockClock()
87
{
88
  this.hourBlock = new Block();
89
  this.minuteBlock = new Block();
90
  this.secondBlock = new Block();
91
  this.dayBlock = new Block();
92
  this.monthBlock = new Block();
93
  this.yearBlock = new Block();
94
  this.update = function()
95
    {
96
      var time = new Date();
97
      this.hourBlock.set(time.getHours());
98
      this.minuteBlock.set(time.getMinutes());
99
      this.secondBlock.set(time.getSeconds());
100
      this.dayBlock.set(time.getDate());
101
      this.monthBlock.set(time.getMonth()+1);
102
      this.yearBlock.set(time.getFullYear()%100);
103
    };
104
}
105
 
106
 
107
var clockclock = new ClockClock();
108
clockclock.update();
109
setInterval(function() { clockclock.update(); }, 1000);
 

clock clock

CSSDeck G+