JavaScriptによる二進数時計

以前書いたコードが出てきたので貼っておきます。今見直してみると、ちょっとムダがあるコードですね。 JavaScriptは書けません、でお茶を濁しておきましょう。

// 2010/01/08 jbClock by dyama
// for Firefox, Opera and Google Chrome

var BgColor = '#F00000';
var BaseColor = '#351309';
var ActiveColor = '#FF470F';
var Height = 8;
var Width = 16;

// 文字列を指定した桁数kになるまで頭にmを挿入する
function kt( s, k, m ){ while( s.length < k ){ s = m + s;} return s;}

function bclock()
{
    var n = new Date();
    // toString(2) ... 二進数文字列にする
    // kt で頭に文字列"0"を挿入して返す
    // 0と1の文字列だと、後でHTMLを一括置換した時に置換対象以外も
    // 置換してしまうので一時的に文字0を文字列$zに、文字1を文字列$oにする
    var h = kt(n.getHours().toString(2),5,0).replace(/0/g,'$z').replace(/1/g,'$o');
    var m = kt(n.getMinutes().toString(2),6,0).replace(/0/g,'$z').replace(/1/g,'$o');
    var s = kt(n.getSeconds().toString(2),6,0).replace(/0/g,'$z').replace(/1/g,'$o');
    // 0だった場合と1だった場合のHTMLタグを準備
    var t = '<td bgcolor="' + ActiveColor + '" height="' + Height + '" width="' + Width + '"></td>';
    var f = '<td bgcolor="' + BaseColor + '" height="' + Height + '" width="' + Width + '"></td>';
    var o = document.getElementById("area");
    // "$z$z$o$z$o" のような文字列のままタグ挿入
    var v = '<tr><td bgcolor="$a" height="' + Height + '" width="' + Width + '"></td>' + h + "</tr><tr>" + m + "</tr><tr>" + s + "</tr>";
    var a = (n.getSeconds()%2)?BgColor:BaseColor;
    // 最後に$zを0用のHTMLに、$oを1用のタグにHTML全体を一括置換
    o.innerHTML = v.replace(/\$z/g,f).replace(/\$o/g,t).replace(/\$a/,a);
    // 1秒ごとに実行する
    setTimeout("bclock()", 1000);
}

これを実行すると、次のように見えます。