画像を曜日で変えるJavaScript

Kazuya Takato

Kazuya Takato

このサイトに使われてる曜日によって画像を変える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とか来ちゃうとエラーになってしまいますね。

直しておかなきゃ。

この記事のシェア数

0

Kazuya Takato
Kazuya Takato Technology / Senior Technologist

1983年生まれ、SIerとしてJava、C#等の開発案件にエンジニアとして従事 その後LIGに入社し、バックエンド/フロントエンドエンジニアとして多種多様な案件に従事。

自己紹介をもっと見る