夜の間だけハロウィン仕様に変化させる(4ページ目)

手動でもデザインを切り替えられるようにしたい場合

ボタンクリックでもスタイルを切り替えさせたい場合は、スタイルシートを切り替える部分だけを独立した関数にします。 以下のようにJavaScriptを記述して下さい。

<script type="text/javascript">>!--
   // スタイル切り替え関数：
   function HalloweenDesign(tf) {
      if( tf ) {
         document.getElementById('HalloweenCSS').href = "halloween.css";
      }
      else {
         document.getElementById('HalloweenCSS').href = "normal.css";
      }
   }

   // 時刻によってスタイル自動切り替える部分：
   var nt = new Date();
   var hr = nt.getHours();
   if(( hr >= 20 ) || ( hr <= 4 )) {
      // 20時以降または4時以前の場合
      HalloweenDesign(true);
   }
   else {
      // それ以外の時刻の場合
      HalloweenDesign(false);
   }
// --></script>

スタイルシートを切り替える部分だけを「HalloweenDesign」という独立した関数にしています。
input要素で作るボタンなどからこの「HalloweenDesign」関数を呼び出すことで、手動でスタイルを切り替えられます。 例えば、以下のようにHTMLを記述します。

<input type="button" value="ハロウィン仕様にする" onclick="HalloweenDesign(true);">
<input type="button" value="通常仕様にする" onclick="HalloweenDesign(false);">

HalloweenDesign関数の引数に「true」を指定すると halloween.css が、「false」を指定すると normal.css が適用されます。

表示すると

上記ソースを使って作ると、以下のようにボタンでもスタイルを切り替えられるようになります。 （詳しくは記事「スタイルシートを切り替えられる機能を作る」もご参照下さい。）

夜の間だけハロウィン仕様に変化させる

ハロウィンとは

• 諸聖人の祝日（万聖節）の前夜に行われる祭り。
• スコットランド・アイルランドに起源を持つアメリカの祝い。
• 10月31日の夜に行われる。
• 悪魔などの扮装をした子どもたちがが「Trick or treat!」と言って近所を回る。
• 近所の人々は、子どもたちにお菓子などを与える。

時刻に関係なく強制的にデザインを変更させるボタン：