【プログラミング】美人時計のようなもの(Web編)

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タグを書き換えるだけでいいので、思ったほど簡単なコードになりました。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください