先ごろ「ブログパーツのアナログ時計が大きすぎるので小さくしたい」という質問があったが、ブログパーツは <script /> で提供されるので、時計というような場合、カスタマイズできることにならない。

無論昔も今も Flash で作成するのがオーソドックスな方法。
最近は javascript でも jQuery を用いればカンタンにできるようにはなった。
それでも、文字盤や針は自分で用意しなければならない。

jquery.Rotate.js を用いる方法もあるが、jQuery 本体があれば、僅か 30 行 1.2kb 程度の javascript と CSS で実現できる。
レンタルの無料ブログで試してみた。

参考にした講座は CSS-TRICKS。
ところが、 0 秒になると分針がカクッと移動する。 それでは面白くないので、 ない頭を絞ってトライしたが、存外カンタンであった。

        $(document).ready(function() {
         
              setInterval( function() {
              var seconds = new Date().getSeconds();
              var sdegree = seconds * 6;
              var srotate = "rotate(" + sdegree + "deg)";

              $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
              }, 1000 );
         
              setInterval( function() {
              var hours = new Date().getHours();
              var mins = new Date().getMinutes();
              var hdegree = hours * 30 + (mins / 2);
              var hrotate = "rotate(" + hdegree + "deg)";
              
              $("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
              }, 1000 );
        
              setInterval( function() {
              var mins = new Date().getMinutes();
              var seconds = new Date().getSeconds(); // added var seconds
              var mdegree = mins * 6 + (seconds / 10); // added seconds count
              var mrotate = "rotate(" + mdegree + "deg)";
              
              $("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});
              }, 1000 );
       }); 

CSS はヘッダーに重ねるために #header の position 値を relative にし、 #clock の position 値は absolute にした。