ページを表示する度に背景画像を変える
ページを表示する度に背景画像を変えて表示します。
このページでは、ランダムに背景画像を変えるのでブラウザの更新（リロード）ボタンをクリックすることでテストできます。
サンプル用背景画像はＤＡＴＥＮＳＨＩ 様より提供して頂きました。
■ 背景画像をランダムに変えるスクリプトのソース
<script>
wall = new Array();
/* 使用する背景画像を好きなだけ記述 */
wall[0] = "./image/bg0.jpg";
wall[1] = "./image/bg1.jpg";
wall[2] = "./image/bg2.jpg";
wall[3] = "./image/bg3.jpg";
wall[4] = "./image/bg4.jpg";
rnd = Math.round(Math.random() * (wall.length - 1));
document.write('<style type="text/css">body { background-image:url(' , wall[rnd] , '); }</style>');
</script>
|
■ 背景画像を時刻によって変えるスクリプトのソース
<script>
wall = new Array();
/* それぞれの時刻毎に背景にする画像を記述 */
wall[0] = "./image/bg0.jpg"; // 0時台の背景画像
wall[1] = "./image/bg1.jpg"; // 1時台の背景画像
wall[2] = "./image/bg2.jpg"; // 2時台の背景画像
wall[3] = "./image/bg3.jpg"; // 3時台の背景画像
wall[4] = "./image/bg4.jpg"; // 4時台の背景画像
wall[5] = "./image/bg5.jpg"; // 5時台の背景画像
wall[6] = "./image/bg6.jpg"; // 6時台の背景画像
wall[7] = "./image/bg7.jpg"; // 7時台の背景画像
wall[8] = "./image/bg8.jpg"; // 8時台の背景画像
wall[9] = "./image/bg9.jpg"; // 9時台の背景画像
wall[10] = "./image/bg10.jpg"; // 10時台の背景画像
wall[11] = "./image/bg11.jpg"; // 11時台の背景画像
wall[12] = "./image/bg12.jpg"; // 12時台の背景画像
wall[13] = "./image/bg13.jpg"; // 13時台の背景画像
wall[14] = "./image/bg14.jpg"; // 14時台の背景画像
wall[15] = "./image/bg15.jpg"; // 15時台の背景画像
wall[16] = "./image/bg16.jpg"; // 16時台の背景画像
wall[17] = "./image/bg17.jpg"; // 17時台の背景画像
wall[18] = "./image/bg18.jpg"; // 18時台の背景画像
wall[19] = "./image/bg19.jpg"; // 19時台の背景画像
wall[20] = "./image/bg20.jpg"; // 20時台の背景画像
wall[21] = "./image/bg21.jpg"; // 21時台の背景画像
wall[22] = "./image/bg22.jpg"; // 22時台の背景画像
wall[23] = "./image/bg23.jpg"; // 23時台の背景画像
tm = new Date();
tm = tm.getHours();
document.write('<style type="text/css">body { background-image:url(' , wall[tm] , '); }</style>');
</script>
|
