More than 5 years have passed since last update.

曜日ごとに日替わり画像を表示する

Last updated at 2019-07-26Posted at 2019-07-24

準備

日替わり画像にidを指定する

html

<img id="daily_image" src="dummy.jpg" alt="日替わり画像">

日替わり画像を挿入するjsを作る

(function() {
    "use strict";
    var target_id = "daily_image"
      , image_list = ["sun.jpg", "mon.jpg", "tue.jpg", "wed.jpg", "thu.jpg", "fri.jpg", "sat.jpg"]
      , target = document.getElementById(target_id)
      , weekday = new Date().getDay();

    target.src = image_list[weekday];
}());

完成形

weekday_test.html

<!doctype html>
<meta charset="utf-8">
<title>日替わり画像のテスト</title>

<img id="daily_image" src="dummy.jpg" alt="日替わり画像">
<script>
    (function() {
        "use strict";
        var target_id = "daily_image"
          , image_list = ["sun.jpg", "mon.jpg", "tue.jpg", "wed.jpg", "thu.jpg", "fri.jpg", "sat.jpg"]
          , target = document.getElementById(target_id)
          , weekday = new Date().getDay();

        target.src = image_list[weekday];

    }());
</script>

実験

完成形を読み込むと

html

<img id="daily_image" src="dummy.jpg" alt="日替わり画像">

の部分が

html

<img id="daily_image" src="wed.jpg" alt="日替わり画像">

に変換される
※この記事を書いた日が水曜日であるため、wed.jpgとなっております。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up