画像を曜日で変えるJavaScript

このサイトに使われてる曜日によって画像を変えるJavaScriptのお話です。

function dayChange(){
	// 画像フォルダのパス
	var path = "./images/";

	// Dateオブジェクトを取得
	var today = new Date();
	// 曜日を取得
	var youbi = today.getDay();

	// 画像の名前
	var jpgName = "";
	// 曜日によって画像の名前を変更
	if(youbi == 0){
		jpgName = "day-sun.jpg";
	} else if(youbi == 1){
		jpgName = "day-moon.jpg";
	} else if(youbi == 2){
		jpgName = "day-mars.jpg";
	}else if(youbi == 3){
		jpgName = "day-mercury.jpg";
	}else if(youbi == 4){
		jpgName = "day-jupiter.jpg";
	}else if(youbi == 5){
		jpgName = "day-venus.jpg";
	}else if(youbi == 6){
		jpgName = "day-saturn.jpg";
	}

	// フォルダのパス＋画像の名前
	path = path + jpgName;

        // 画像を変更するエレメントを取得
	var obj = document.getElementById('header');

        obj.style.backgroundImage = 'url('+path+')';
}

とりあえず今のところこんな感じのソースになってます。

特に難しいところはないですね。

もう少しすっきりさせたかったんですが、思いつきませんでした。

ありえないと思いますが、

var youbi = today.getDay();

で7とか来ちゃうとエラーになってしまいますね。

直しておかなきゃ。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。