<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> <!-- var wall = new Array(24); wall[0] = "./image00.gif"; wall[1] = "./image01.gif"; wall[2] = "./image02.gif"; wall[3] = "./image03.gif"; wall[4] = "./image04.gif"; wall[5] = "./image05.gif"; wall[6] = "./image06.gif"; wall[7] = "./image07.gif"; wall[8] = "./image08.gif"; wall[9] = "./image09.gif"; wall[10] = "./image10.gif"; wall[11] = "./image11.gif"; wall[12] = "./image12.gif"; wall[13] = "./image13.gif"; wall[14] = "./image14.gif"; wall[15] = "./image15.gif"; wall[16] = "./image16.gif"; wall[17] = "./image17.gif"; wall[18] = "./image18.gif"; wall[19] = "./image19.gif"; wall[20] = "./image20.gif"; wall[21] = "./image21.gif"; wall[22] = "./image22.gif"; wall[23] = "./image23.gif"; function bgchange() { var time = new Date().getHours(); document.body.background = wall[time]; } // --> </script> </head> <body background="./image00.gif" onload="bgchange();"> : : </body> </html>
new Array() で時間分の配列を作ります。(24枚の壁紙が必要です)
new Date().getHours() で現在の時間を取得し、それを document.body.background に代入して書き換えします。
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
var wall = new Array(24);
for (var i = 0; i < wall.length; i++) {
var num = i;
if (num < 10) num = "0" + num; // 連番画像の桁をそろえる *1
wall[i] = "./image" + num + ".gif"; // "パスと番号以外のファイル名" + 画像番号 + "拡張子";
}
function bgchange() {
var time = new Date().getHours();
document.body.background = wall[time];
}
// -->
</script>
</head>
<body background="./image00.gif" onload="bgchange();">
:
:
</body>
</html>
このようにまとめて配列を作ります。連番画像を使うならこちらのほうが多少すっきりしていると思います。作られる配列をアラート表示
※この例では image00.gif 〜 image23.gif のようなファイル名に2桁の連番画像を使っています。
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> <!-- var wall = new Array(24); wall[0] = "#000000"; wall[1] = "#ffffff"; wall[2] = "#ff0000"; wall[3] = "#0000ff"; wall[4] = "#ffff00"; wall[5] = "#800080"; wall[6] = "#ff00ff"; wall[7] = "#800000"; wall[8] = "#808000"; wall[9] = "#008000"; wall[10] = "#000080"; wall[11] = "#008080"; wall[12] = "#00ff00"; wall[13] = "#00ffff"; wall[14] = "#808080"; wall[15] = "#c0c0c0"; wall[16] = "red"; wall[17] = "gray"; wall[18] = "green"; wall[19] = "purple"; wall[20] = "yellow"; wall[21] = "blue"; wall[22] = "white"; wall[23] = "silver"; function bgchange() { var time = new Date().getHours(); document.body.bgColor = wall[time]; } // --> </script> </head> <body bgcolor="#f5f5f5" onload="bgchange();"> : : </body> </html>
これも上記と同じで壁紙ではなく背景色を指定します。