先ごろ「ブログパーツのアナログ時計が大きすぎるので小さくしたい」という質問があったが、ブログパーツは <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 にした。
