Ajax Loader
×
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
1
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
2
<canvas width="201px" height="201px" id="screen"></canvas>
3
 
 
JavaScript
//Requires jquery just for the extend function.  
1
//Requires jquery just for the extend function.  
2
 
3
var Clock = function(options){
4
 
5
  var SECOND_MINUTE_MOVEMENT = 0.1;
6
  var STARTING_OFFSET = 15; //Addes this number to the time to move the circles '0' point from 9hours to 12hour
7
 
8
 
9
  var defaults = {
10
    
11
    element: 'clock',           //Canvas Element  
12
    timezoneOffset: null,       //This will be the offset from UTC ex. -5
13
    radius: 100,                //Radius of clock
14
    displayClockOutline: true,  //Show the clock's outer circle
15
    displayMinuteDashes:  true, //Show the clocks minute dashes 
16
    displayVertex: true,        //Center dot, not working.
17
    displayNumbers: true,       //Show the numbers
18
    
19
    smallPoint: this.radius / 50,  //Center dot size, not working
20
    
21
    colors:{
22
       backgroundColor: '#fff',    
23
       vertexColor: '#000000',
24
       dashColor: '#333',
25
       clockColor: '#333',
26
       numbersColor: '#333'
27
    },
28
     
29
    minuteHand: {
30
      display: true,
31
      color: '#333',
32
      width: 2,
33
      length: 10
34
    },
35
 
36
    secondHand:{
37
      display: true,
38
      color: '#333',
39
      width: 1,
40
      length: 10
41
    },
42
 
43
    hourHand:{
44
      display: true,
45
      color: '#333',
46
      width: 2,
47
      length: 40
48
    }
49
  };
50
  
51
  //if jquery exists extend the defaults with the options passed in
52
  //if not then just use the defaults.
53
  if (jQuery)
54
    var settings = $.extend({}, defaults, options);
55
  else
56
    var settings = defaults;
57
  
58
  var canvas = document.getElementById(settings.element);
59
  var ctx = canvas.getContext('2d');
60
  
61
  function getDate(){
62
    if (settings.timezoneOffset)
63
      return calcTime(settings.timezoneOffset);
64
     else
65
      return new Date();
66
  }
67
 
68
  function circle(length, color, fillColor) {
69
    length = length || settings.radius;
70
    ctx.beginPath();
71
    ctx.strokeStyle = color || settings.colors.clockColor;
72
    ctx.arc(canvas.width / 2, canvas.height / 2, length, 0, Math.PI * 2);
73
    ctx.fillStyle = fillColor || settings.colors.backgroundColor;
74
    ctx.fill();
75
    ctx.stroke();
76
  }
77
  
78
  function showNumbers(){
79
    ctx.fillStyle = settings.colors.numbersColor;
80
    ctx.font = "bold 16px Arial";
81
    var w = canvas.width / 2;
82
    var h = canvas.height / 2;
83
    var numbers = {
84
      twelve: {
85
        x: h - 10,
86
        y: w - settings.radius + 24,
87
        text: '12'
88
      },
89
        three: {
90
        x: h + settings.radius - 20,
91
        y: w + 6,
92
        text: '3'
93
      },
94
      six: {
95
        x: h - 5,
96
        y: w + settings.radius - 13,
97
        text: '6'
98
      },
99
      nine: {
100
        x: h - settings.radius + 10,
101
        y: w + 5,
102
        text: '9'
103
      }
104
    };
105
    
106
    for (obj in numbers)
107
      ctx.fillText(numbers[obj].text, numbers[obj].x, numbers[obj].y); 
108
  }
109
  
110
  function second(){
111
    var seconds = getDate().getSeconds();
112
    angle = (((seconds + STARTING_OFFSET) * Math.PI / 3) * SECOND_MINUTE_MOVEMENT);
113
    lineSegment(angle, settings.secondHand.length, settings.secondHand.width, settings.secondHand.color)
114
  }
115
 
116
  function minute(){
117
    var minute = getDate().getMinutes();
118
    angle = (((minute + STARTING_OFFSET) * Math.PI / 3) * SECOND_MINUTE_MOVEMENT);
119
    lineSegment(angle, settings.minuteHand.length, settings.minuteHand.width, settings.minuteHand.color);
120
  }
121
 
122
  function hour(){
123
    var date = getDate();
124
    var hour = (date.getHours() > 12) ? date.getHours() - 12  :  date.getHours();
125
    angle = (((hour + STARTING_OFFSET) * Math.PI / 3) * getHourMovement(date.getMinutes())); //.5 .51 .515 
126
    lineSegment( angle,  settings.hourHand.length, settings.hourHand.width, settings.hourHand.color );
127
  }
128
  
129
  //move the hour hand slightly during the hour
130
  function getHourMovement(minute){
131
    if (minute >= 15 && minute < 30)
132
      return .505;
133
    else if (minute >= 30 && minute < 45)
134
      return .51;
135
    else if (minute >= 45)
136
      return .52;
137
    else
138
      return .5;
139
  }  
140
 
141
  function lineSegment( angle, len, width, color ) {
142
    var x1 = Math.cos(angle) * (settings.radius - (len || 0));
143
    var y1 = Math.sin(angle) * (settings.radius - (len || 0));
144
    ctx.beginPath();
145
    ctx.strokeStyle = color;
146
    ctx.moveTo(canvas.width / 2, canvas.height / 2);
147
    ctx.lineTo(canvas.width / 2 - x1, canvas.height / 2 - y1);
148
    ctx.lineWidth = width;
149
    ctx.stroke();
150
    ctx.beginPath();
151
  }
152
 
153
  function dashes(  ) {
154
    for (var i = 0; i < 60; i++){
155
      var angle = (((i + STARTING_OFFSET) * Math.PI / 3) * SECOND_MINUTE_MOVEMENT);
156
      var width = (i % 5) ? 1 : 4;
157
      lineSegment(angle, 0, width, settings.colors.dashColor );
158
    }
159
    dashWidth(7);
160
  }
161
  
162
  //Cheese way to just show the hashs
163
  //Overlay a smaller white circle
164
  function dashWidth(length){
165
    circle(settings.radius - length, settings.colors.backgroundColor, settings.colors.backgroundColor);
166
  }
167
  
168
  function vertex() {
169
    circle(settings.smallPoint, setttins.colors.vertexColor, settings.colors.vertexColor);
170
  }
171
  function calcTime(offset) {
172
    var d = new Date();
173
 
174
    //Deal with dates in milliseconds for most accuracy
175
    utc = d.getTime() + (d.getTimezoneOffset() * 60000);
176
    newDateWithOffset = new Date(utc + (3600000*offset));
177
 
178
    //This will return the date with the locale format (string), or just return newDateWithOffset
179
    //and go from there.
180
    return newDateWithOffset; //.toLocaleString();
181
 
182
  }
183
function init(){
184
    var fns = [];
185
    if (settings.displayClockOutline)
186
      fns.push(circle);
187
   
188
    if (settings.displayMinuteDashes)
189
      fns.push(dashes);
190
    
191
   
192
    
193
    //if (settings.displayVertex)
194
   //   fns.push(vertex);
195
    
196
    if (settings.minuteHand.display)
197
      fns.push(minute);
198
      
199
    if (settings.secondHand.display)
200
      fns.push(second);
201
   
202
    if (settings.hourHand.display)
203
      fns.push(hour);
204
    
205
    if (settings.displayNumbers)
206
      fns.push(showNumbers)
207
    
208
    return fns;
209
  }
210
 
211
  function display(){
212
    var fns = init();
213
    setInterval(function(){
214
      ctx.clearRect(0, 0, canvas.width, canvas.height);
215
      fns.forEach(function(fn) {
216
        ctx.save();
217
        fn();
218
        ctx.restore();
219
      });
220
    }, 1000);
221
  }
222
 
223
 return display();
224
 
225
};
226
 
227
Clock({
228
  element: 'screen',
229
  radius: 100,
230
  displayMinuteDashes: true
231
});
232
 
233
 
 

CanvasClock

CSSDeck G+