気まぐれDeveloperブログ: HTML5と戯れる 2

2014年4月12日土曜日

前回作成した簡易時計ページに、アニメーションを付けてみました。

以下ソース

<!DOCTYPE html>

<html>

<head>

<!-- 画面サイズの横幅320pxで固定 -->

<meta name="viewport" content="width=320, user-scalable=no" />

<meta charset="utf-8" />

</head>

<body>

  <!-- デジタル時計の画面を指定 -->

  <!--

  <div id="disp" style="font-size:48px;text-align:center;"></div>

-->

  <div id="clock">

    <div style="font-size:32px;">&nbsp;</div>

    <div id="anime1">●●●●●</div>

    <div id="disp">00:00:00</div>

    <div id="anime2">●●●●●</div>

  </div>

  <!-- 時計を表示するスクリプト -->

  <script type="text/javascript">

    setInterval(showTime, 500);

    function showTime() {

      var t = new Date();

      // 時間を表示する

      $("disp").innerHTML = t.getHours() + ":" +

        t.getMinutes() + ":" +

        t.getSeconds();

      // 簡単なアニメーションを行う

      var sec = t.getSeconds();

      var n = "", m = "";

      for(var i = 0; i < 5; i++) {

          n += (i < (sec%5)) ? "●" : "○";

          m += (i >= (sec%5)) ? "●" : "○";

}

      $("anime1").innerHTML = n;

      $("anime2").innerHTML = m;

      // CSSのTransform機能を使ってDIV要素を回転させる

      var deg = Math.floor(360 * (sec / 60));

      $("clock").style.webkitTransform = "rotate(" + deg + "deg)";

}

    // DOM要素を取得する

    function $(id) { return document.getElementById(id); }

  </script>

</body>

</html>

実際にブラウザ上で動かしてみた結果。。

なんかしょぼい?

気まぐれDeveloperブログ