Tech commitの挑戦状課題で「美人時計のようなもの」があったので、まずはJavascriptで作成しました。
飯テロ時計
http://taki-lab.site/meshitero/meshitero.html
https://github.com/takishita2nd/meshitero_timer
30分おきに画像が変わり、時間を教えてくれます。
コード解説
まずは、html本体。
<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>飯テロ時計</title>
<script src="jquery-3.4.1.min.js"></script>
</header>
<body>
<img id="image" width="640" height="480" src="" />
<script src="meshitero.js" ></script>
</body>
</html>ライブラリはjQueryを使用。これを使うと、IDやclass指定した要素の取得が簡単になります。
本体は画像を表示するimgタグのみ。
そのあとにjs本体を読み込ませます。
jsは最後に書かないと、きちんと動いてくれないっぽい。
続いて、js本体。
function getImageName() {
var date = new Date();
var hour = ("00" + date.getHours()).slice(-2);
var min = "00";
if(date.getMinutes() >= 30) {
min = "30"
}
var imageFormat = "time_{0}_{1}.jpg";
return imageFormat.replace("{0}", hour).replace("{1}", min);
}
function imageUpdate(force = false) {
var date = new Date();
if(force = false &&
(date.getMinutes() % 30) != 0) {
return;
}
var imageName = getImageName();
var image = $("#image")[0].src = "img/" + imageName;
}
document.onload = imageUpdate(true);
setInterval(imageUpdate, 60000);まず、用意する画像のファイル名は「time_hh_mm.jpg」で統一します。
ファイル名フォーマットとして”time_{0}_{1}.jpg”というのを用意し、あとは実際の時間に合わせて{0}と{1}の部分をリプレースして、ファイル名を作成します。
画像の置き換えはimgタグの要素srcの値を書き換えるだけです。
で、setInterval()で一定時間後周期的にヶ同読み込みが行われるのですが、初回ロード時にも画像を読んで貰わないと行けないので、onload（html読み込み終了時）に強制的に読み込みを実行します。
imageUpdate(force = false) {}とは、引数を指定しなければforceの値は初期値falseが適用されます。
imgタグを書き換えるだけでいいので、思ったほど簡単なコードになりました。