Welcome, guest | Sign In | My Account | Store | Cart

Simplest analog clock (CSS, SVG, JavaScript).

HTML, 93 lines
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Clock</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
      html, body {
        background-color: #eee;
        font-family: tahoma;
        font-size: 90%;
        height: 100%;
        width: 100%;
      }
      * {
        margin: 0;
        padding: 0;
      }
      td {
        text-align: center;
      }
      #box {
        background-color: #cc0000;
        color: #fff;
        font-weight: bold;
        text-align: center;
        padding: 3px 0 3px 0;
      }
      #container {
        height: 100%;
        vertical-align: middle;
        width: 100%;
      }
      #clock {
        fill: #cc55fa;
        stroke: #000;
        stroke-linecap: round;
      }
      #surface, #h_pointer {
        stroke-width: 5px;
      }
      #delimiters, #s_pointer {
        stroke-width: 1px;
      }
      #m_pointer {
        stroke-width: 3px;
      }
      #numbers {
        font-family: sans-serif;
        font-size: 80%;
      }
    </style>
    <script language="javascript" type="text/javascript">
      function timerTick() {
        with (new Date()) {
          var h, m, s;
          
          h = 30 * ((getHours() % 12) + getMinutes() / 60);
          m = 6 * getMinutes();
          s = 6 * getSeconds();

          document.getElementById('h_pointer').setAttribute('transform', 'rotate(' + h + ', 50, 50)');
          document.getElementById('m_pointer').setAttribute('transform', 'rotate(' + m + ', 50, 50)'); 
          document.getElementById('s_pointer').setAttribute('transform', 'rotate(' + s + ', 50, 50)');
          
          setTimeout(timerTick, 1000);
        }
      }
    </script>
  </head>
  <body onload='timerTick()'>
    <noscript><div id='box'>Please, enable JavaScript and refresh page.</div></noscript>
    <table id='container'>
      <tr>
        <td>
          <svg id='clock' viewBox='0 0 100 100' width='200' height='200'>
            <circle id='surface' cx='50' cy='50' r='45'/>
            <g id='pointers'>
              <line id='h_pointer' x1='50' y1='50' x2='50' y2='27' />
              <line id='m_pointer' x1='50' y1='50' x2='50' y2='17' />
              <line id='s_pointer' x1='50' y1='50' x2='50' y2='13' />
            </g>
            <g id='numbers'>
              <text x='43' y='18'>12</text>
              <text x='85' y='54'>3</text>
              <text x='47' y='91'>6</text>
              <text x='9' y='54'>9</text>
            </g>
          </svg>
        </td>
      </tr>
    </table>
  </body>
</html>

2 comments

Jim Stephenson 7 years, 1 month ago  # | flag

Brilliant coding! After I blocked the time interval l tried to randomise the variables h, m and s to produce a random resettable static time on the clock face by a button click which would ask a random set of questions relating to time. I teach English as a foreign language on an intranet basis. This would save me an immense amount of two way email or chat messages. I look forward to help on this please. jacobi

LsHallo 4 years, 5 months ago  # | flag

I've created this clock: https://github.com/LsHallo/analog_clock Maybe it suits your situation. If i hear back from you i'm open to develop if further!

Created by greg zakharov on Fri, 11 Oct 2013 (MIT)
HTML recipes (12)
greg zakharov's recipes (59)

Required Modules

  • (none specified)

Other Information and Tasks