Skip to content

Instantly share code, notes, and snippets.

@dyama

dyama/jbclock.html

Created November 17, 2013 15:45
Show Gist options
  • Save dyama/7514760 to your computer and use it in GitHub Desktop.
Save dyama/7514760 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScriptによる二進数時計のサンプルです。上段から時、分、秒。24時間表示です。
Raw
jbclock.html
<head>
<script type="text/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);
}
// -->
</script>
</head>
<body onLoad="bclock()">
<table id="area" style="font-size:6px;" bgcolor="white" cellspacing="1" cellpadding="0"></table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment