例)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;
/* 以下略 */
}
こちらもあわせてどうぞ