[JavaScript] 指定時刻に表示を切り替える

例)2011年1月1日0時0分0秒になった瞬間、リロードしなくても、表示内容が切り替わるようにする。
jsディレクトリ内のchangeDisplay.jsに記述

window.onload = changeDisplay;
function changeDisplay(){
	var objDate = new Date();
	var now = objDate.getTime();//現在のタイムスタンプ(ミリ秒)を取得
	var changeTime = new Date("Jan 1, 2011 00:00:00");//切り替える日時のタイムスタンプ(ミリ秒)を取得
	//切り替え前
	if (now < changeTime) {
		document.getElementById('hoge').style.display = "block";
		document.getElementById('hoge2').style.display = "none";
		setTimeout("changeDisplay()", 1000);//1秒ごとに実行(◯秒ごとの場合は、第2引数に 「◯ * 1000」 と記述)
	//切り替え後
	} else {
		document.getElementById('hoge').style.display = "none";
		document.getElementById('hoge2').style.display = "block";
	}
}

HTMLのHEADタグ内に記述

<meta http-equiv="Content-Type" content="text/html; charset= UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="js/changeDisplay.js"></script>

HTMLのBODYタグ内に記述

<noscript>
JavaScriptを有効にしてください。
</noscript>
<div id="hoge1">切り替え前の内容</div>
<div id="hoge2">切り替え後の内容</div>

CSSに記述

hoge1 {
	display: block;
	/* 以下略 */
}
hoge2 {
	display: none;
	/* 以下略 */
}
こちらもあわせてどうぞ
  1. [JavaScript] 印刷するボタン
  2. [JavaScript] IE9.js
HatenaGoogle BookmarksYahoo BookmarksFacebook

コメントする

*