JavaScriptでバイナリ時計を作ろう

バイナリ時計 JavaScript

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版のサイドバーに表示させているよ！
みゅう
表示されてませんけど…
室井
このページだとコードが干渉してサイドバーには表示されないんですよ。
他のページでは表示されているはずです！