JavaScriptでサイドバーに設置しているバイナリ時計を作成しました。
左2列で時、真ん中2列で分、右2列で秒を表しています。
サンプルプログラム
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Clock</title> <style> #mycanvas { display: block; margin: 0 auto; padding: 2.5px; max-width: 100%; } </style> </head> <body> <canvas id="myCanvas" width="595" height="395"> </canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var i = 0; var now; var hour; var min; var sec; const hourCheck = [16,8,4,2,1]; const minSecCheck = [32,16,8,4,2,1]; function getTime(){ now = new Date(); hour = now.getHours(); min = now.getMinutes(); sec = now.getSeconds(); } function draw(){ ctx.clearRect(0, 0, 600, 400); getTime(); //時の表示 for(i = 0; i < 5; i++){ if(hour >= hourCheck[i]){ ctx.beginPath(); switch(i){ case 0: ctx.rect(0, 300, 95, 95); break; case 1: ctx.rect(100, 0, 95, 95); break; case 2: ctx.rect(100, 100, 95, 95); break; case 3: ctx.rect(100, 200, 95, 95); break; case 4: ctx.rect(100, 300, 95, 95); break; default: break; } ctx.fillStyle = "#444"; ctx.fill(); ctx.closePath(); hour -= hourCheck[i]; } } //分の表示 for(i = 0; i < 6; i++){ if(min >= minSecCheck[i]){ ctx.beginPath(); switch(i){ case 0: ctx.rect(200, 200, 95, 95); break; case 1: ctx.rect(200, 300, 95, 95); break; case 2: ctx.rect(300, 0, 95, 95); break; case 3: ctx.rect(300, 100, 95, 95); break; case 4: ctx.rect(300, 200, 95, 95); break; case 5: ctx.rect(300, 300, 95, 95); break; default: break; } ctx.fillStyle = "#444"; ctx.fill(); ctx.closePath(); min -= minSecCheck[i]; } } //秒の表示 for(i = 0; i < 6; i++){ if(sec >= minSecCheck[i]){ ctx.beginPath(); switch(i){ case 0: ctx.rect(400, 200, 95, 95); break; case 1: ctx.rect(400, 300, 95, 95); break; case 2: ctx.rect(500, 0, 95, 95); break; case 3: ctx.rect(500, 100, 95, 95); break; case 4: ctx.rect(500, 200, 95, 95); break; case 5: ctx.rect(500, 300, 95, 95); break; default: break; } ctx.fillStyle = "#444"; ctx.fill(); ctx.closePath(); sec -= minSecCheck[i]; } } } setInterval('draw()',500); </script> </body> </html>
コードの解説
Canvasの設定
17行目でJavaScriptで図形を描写する領域を作成します。
width属性とheight属性で最大サイズを指定します。
<canvas id="myCanvas" width="595" height="395"> </canvas>
6~13行目でcanvas要素に対するスタイルを記述します。
max-width: 100%; と書くことでレスポンシブ対応させます。
<style> #mycanvas { display: block; margin: 0 auto; padding: 2.5px; max-width: 100%; } </style>
変数の準備
図形を描写するための準備などをしています。
再代入しない変数は const で宣言しました。
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var i = 0; var now; var hour; var min; var sec; const hourCheck = [16,8,4,2,1]; const minSecCheck = [32,16,8,4,2,1];
時間を取得する関数の作成
現在の時間を取得するための関数を作成します。
hour,min,sec にそれぞれ時,分,秒が代入されます。
function getTime(){ now = new Date(); hour = now.getHours(); min = now.getMinutes(); sec = now.getSeconds(); }
図形を描写する関数の作成
最初にcanvasの中身を消去してから、取得した時間に応じて図形を描写していきます。
32以上か比較する以外は、時,分,秒すべて同じ処理です。
頑張ればもう少し短く書けそうな気がする。
function draw(){ ctx.clearRect(0, 0, 600, 400); getTime(); //時の表示 for(i = 0; i < 5; i++){ if(hour >= hourCheck[i]){ ctx.beginPath(); switch(i){ case 0: ctx.rect(0, 300, 95, 95); break; case 1: ctx.rect(100, 0, 95, 95); break; case 2: ctx.rect(100, 100, 95, 95); break; case 3: ctx.rect(100, 200, 95, 95); break; case 4: ctx.rect(100, 300, 95, 95); break; default: break; } ctx.fillStyle = "#444"; ctx.fill(); ctx.closePath(); hour -= hourCheck[i]; } } 省略...
再描画の処理
図形を描画する処理を繰り返します。
1000ミリ秒ごとに処理すると最大で1秒に近い誤差が生じるので、500ミリ秒に設定しています。
setInterval('draw()',500);
あとがき
今回は単体で動作させたかったので、CSSやJavaScriptもすべて同じファイルに書きました。
ですので、WordPressのサイドバーなどに追加すればすぐに動かすことができます。
このブログもPC版のサイドバーに表示させているよ!
表示されてませんけど…
このページだとコードが干渉してサイドバーには表示されないんですよ。
他のページでは表示されているはずです!
他のページでは表示されているはずです!