前回作成した簡易時計ページに、アニメーションを付けてみました。
以下ソース
<!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;"> </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>
実際にブラウザ上で動かしてみた結果。。
なんかしょぼい?