Created
November 17, 2013 15:45
-
-
Save dyama/7514760 to your computer and use it in GitHub Desktop.
JavaScriptによる二進数時計のサンプルです。上段から時、分、秒。24時間表示です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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