準備
日替わり画像にidを指定する
html
<img id="daily_image" src="dummy.jpg" alt="日替わり画像">
日替わり画像を挿入するjsを作る
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となっております。