秒単位で動くアナログ時計をホームページに簡単に表示できます。

背景画像を使用した場合には、下のような実際の時計に近いイメージとなります

下のような秒単位で動く秒針のあるアナログ時計をホームページに簡単に表示できます。
（ご注意：jqueryとの併用は、できません）

head内に貼り付けて下さい
<style type="text/css"> td { text-align: center; } #box { background-color: #0000ff; color: #fff; font-weight: normal; text-align: center; padding: 3px 0 3px 0; } #container { height: 100%; vertical-align: middle; width: 100%; } #clock { fill: #ff00ff; stroke: #0000ff; stroke-linecap: circle; } #surface, #h_pointer { stroke-width: 3px; } #delimiters, #s_pointer { stroke-width: 1px; } #m_pointer { stroke-width: 2px; } #numbers { font-family: "メイリオ"; font-size: 12px; } </style> <script language="javascript" type="text/javascript"> window.onload=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>

body内に貼り付けて下さい
<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='66' y='24'>1</text> <text x='81' y='35'>2</text> <text x='85' y='54'>3</text> <text x='81' y='74'>4</text> <text x='67' y='87'>5</text> <text x='47' y='93'>6</text> <text x='29' y='87'>7</text> <text x='12' y='74'>8</text> <text x='9' y='54'>9</text> <text x='10' y='35'>10</text> <text x='23' y='20'>11</text> </g> 使用されているブラウザがSVGに対応していません。 </svg> </td> </tr> </table>