ページ

2014年4月12日土曜日

HTML5と戯れる 2 - アニメーション -

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

以下ソース

<!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>

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


















なんかしょぼい?

0 件のコメント:

コメントを投稿