【JAVASCRIPT】時間によってCSSを変えるソースを教えてください。0時~12時まではam.css、12時~0時まではpm.cssで、JAVASCRIPTが無効な場合はam.cssが適用されるようにしたいのですが・・・。xhtml1.0宣言をしても大丈夫なソースでお願いします。

また日によってCSSを変える方法も教えてくださると嬉しいです。1月1日~3日だけ変えるなど。イルカ差し上げます。

回答の条件
  • 1人3回まで
  • 登録:2007/11/20 23:13:18
  • 終了:2007/11/21 01:56:47

ベストアンサー

id:kyosh No.2

kyosh回答回数143ベストアンサー獲得回数52007/11/21 00:54:49

ポイント48pt

↑の投稿が改行してなかったみたいで(というか、

が入ってしまって)すみませんっ。

正しくは↓です。

--------------------

<html>
  <head>
  <script language="JavaScript">
    window.onload = function() {
      var delay = 1000;
      setInterval(function() {
      var now = new Date();
      var theHour = now.getHours();
      var cssFile = ((theHour < 12) ? "am.css" : "pm.css");
      document.getElementById('basic').href=cssFile;
      }, delay);
    };
  </script>
  <link rel="stylesheet" type="text/css" href="am.css" id="basic" />
</head>

<body>
</body>
</html>

--------------------

また、日付(期間)によってCSSを変える方法です↓

spYear 、spMonth、spDateが開始日、spTermが期間です。

開始日+期間の日に通常(basic.css)に戻ります。

--------------------

<html>
  <head>
    <script language="JavaScript">
      window.onload = function() {
        var spYear = 2007;  // 開始年
        var spMonth = 11;   // 開始月
        var spDate = 21;    // 開始日
        var spTerm = 3;     // 期間
        var delay = 1000;
        setInterval(function() {
          var now = new Date();
          var theDate = now.getTime();
          var theSP=new Date(spYear+'/'+spMonth+'/'+spDate).getTime();
          // 期間内か判断
          var cssFile = ((theSP <= theDate && theDate < theSP+(spTerm*24*60*60*1000)) ? "special.css" : "basic.css");
          document.getElementById('basic').href=cssFile;
        }, delay);
      };
    </script>
    <link rel="stylesheet" type="text/css" href="basic.css" id="basic" />
  </head>

  <body>
  </body>
</html>

--------------------

↑と同じ考え方で、時間を指定するには↓はいかがでしょう?

--------------------

<html>
  <head>
    <script language="JavaScript">
      window.onload = function() {
        var spHour_start  = 6;  // 開始時
        var spHour_end    = 22; // 終了時
        var delay = 1000;
        setInterval(function() {
          var now = new Date();
          var theHour = now.getHours();
          // 期間内か判断
          var cssFile = ((spHour_start <= theHour && theHour < spHour_end) ? "a.css" : "b.css");
          document.getElementById('basic').href=cssFile;
        }, delay);
      };
    </script>
    <link rel="stylesheet" type="text/css" href="" id="basic" />
  </head>

  <body>
  </body>
</html>
id:tsuntsuku

ありがとうございます!

この期間や時間を指定する方法も切り替えるタイムラグが出てしまうのでしょうか??

2007/11/21 01:04:46

その他の回答(1件)

id:kyosh No.1

kyosh回答回数143ベストアンサー獲得回数52007/11/20 23:56:38

ポイント48pt

まず、時間によってCSSを変える方法を↓

難点は、最初にsm.cssを読み込むので、PMだとam.css→pm.cssに切り替えるタイムラグが出てしまいます…。

その点、ちょっと改良を考え中ですm(__)m

--------------------

<html>

<head>

<script language="JavaScript"></p> <p> window.onload = function() {</p> <p> var delay = 1000;</p> <p> setInterval(function() {</p> <p> var now = new Date();</p> <p> var theHour = now.getHours();</p> <p> var cssFile = ((theHour < 12) ? "am.css" : "pm.css");</p> <p> document.getElementById('basic').href=cssFile;</p> <p> }, delay);</p> <p> };</p> <p> </script>

<link rel="stylesheet" type="text/css" href="am.css" id="basic" />

</head>

<body>

</body>

</html>

--------------------

id:tsuntsuku

ありがとうございます。

例えば12時間で切り替えるのではなく、

6時~22時はa.css、22時~6時まではb.cssというように

時間を自由に設定できるようにするには

どのようにすれば良いでしょうか?

2007/11/21 00:27:12
id:kyosh No.2

kyosh回答回数143ベストアンサー獲得回数52007/11/21 00:54:49ここでベストアンサー

ポイント48pt

↑の投稿が改行してなかったみたいで(というか、

が入ってしまって)すみませんっ。

正しくは↓です。

--------------------

<html>
  <head>
  <script language="JavaScript">
    window.onload = function() {
      var delay = 1000;
      setInterval(function() {
      var now = new Date();
      var theHour = now.getHours();
      var cssFile = ((theHour < 12) ? "am.css" : "pm.css");
      document.getElementById('basic').href=cssFile;
      }, delay);
    };
  </script>
  <link rel="stylesheet" type="text/css" href="am.css" id="basic" />
</head>

<body>
</body>
</html>

--------------------

また、日付(期間)によってCSSを変える方法です↓

spYear 、spMonth、spDateが開始日、spTermが期間です。

開始日+期間の日に通常(basic.css)に戻ります。

--------------------

<html>
  <head>
    <script language="JavaScript">
      window.onload = function() {
        var spYear = 2007;  // 開始年
        var spMonth = 11;   // 開始月
        var spDate = 21;    // 開始日
        var spTerm = 3;     // 期間
        var delay = 1000;
        setInterval(function() {
          var now = new Date();
          var theDate = now.getTime();
          var theSP=new Date(spYear+'/'+spMonth+'/'+spDate).getTime();
          // 期間内か判断
          var cssFile = ((theSP <= theDate && theDate < theSP+(spTerm*24*60*60*1000)) ? "special.css" : "basic.css");
          document.getElementById('basic').href=cssFile;
        }, delay);
      };
    </script>
    <link rel="stylesheet" type="text/css" href="basic.css" id="basic" />
  </head>

  <body>
  </body>
</html>

--------------------

↑と同じ考え方で、時間を指定するには↓はいかがでしょう?

--------------------

<html>
  <head>
    <script language="JavaScript">
      window.onload = function() {
        var spHour_start  = 6;  // 開始時
        var spHour_end    = 22; // 終了時
        var delay = 1000;
        setInterval(function() {
          var now = new Date();
          var theHour = now.getHours();
          // 期間内か判断
          var cssFile = ((spHour_start <= theHour && theHour < spHour_end) ? "a.css" : "b.css");
          document.getElementById('basic').href=cssFile;
        }, delay);
      };
    </script>
    <link rel="stylesheet" type="text/css" href="" id="basic" />
  </head>

  <body>
  </body>
</html>
id:tsuntsuku

ありがとうございます!

この期間や時間を指定する方法も切り替えるタイムラグが出てしまうのでしょうか??

2007/11/21 01:04:46
  • id:kyosh
    回答数にカウントされてしまうともったいないので、ここで…。
    タイムラグですが、onloadイベントで呼び出した時にインターバルを1秒に設定した後に実行しているせいでした^^;;

    とりあえず、Intervalの中を関数にしてしまって、bodyからも呼び出したらOKでした。

    ----------
    <html>
    <head>
    <script language="JavaScript">
    window.onload = function() {
    var delay = 1000;
    setInterval(function() {
    change();
    }, delay);
    };
    function change(){
    var spHour_start = 6; // 開始時
    var spHour_end = 22; // 終了時
    var now = new Date();
    var theHour = now.getHours();
    // 期間内か判断
    var cssFile = ((spHour_start <= theHour && theHour < spHour_end) ? "am.css" : "pm.css");
    document.getElementById('basic').href=cssFile;
    }
    </script>
    <link rel="stylesheet" type="text/css" href="" id="basic" />
    </head>

    <body onLoad="change()">
    </body>
    </html>
  • id:kyosh
    作ってる最中に気付かなかったあたり、我ながらアホですね、、、orz
  • id:tsuntsuku
    onloadで呼び出した時にインターバルを1秒に設定するのはどうしてなんですか??
    すいません・・・JAVASCRIPT全く分かりません(^_^;;)
    この機会に勉強させていただきます。
  • id:tsuntsuku
    インターバル自体??です(T_T)
    普通に間隔でいいんですか?
  • id:kyosh
    setIntervalは、一定時間ごと(今回の場合1秒毎)に処理をします。
    今回の場合、1秒毎に時間を判断してCSSを呼んでいます。
    6時にCSSを切り替える場合、ほぼきっかり6:00に切り替わります。
    1分くらいずれがあってもいいやーって感じなら1分毎でもOKです^^
    1時間くらいずれがあってもーってなら1時間毎でも^^
    1秒毎にしておいたのは、まぁタイマー代わりというか、クセなだけです^^;;
    ↓setIntervalについて(?)
    http://www.scollabo.com/banban/jsindex/sample/sample_248.html

  • id:tsuntsuku
    ということは6時にCSSを切り替える場合、画面を見てるとリロードしなくてもいきなり切り替わるんですか?もしそうならうれしいですが、1秒毎に処理しているということはサーバーには負担にならないんでしょうか?全くの無知ですみません・・・
  • id:kyosh
    はい、リロードしなくても勝手に切り替わります。
    JavaScriptはサーバ側ではなくて、ローカル(ユーザPC)のほうで動くので、サーバに負担はかかりません。
    ブラウザが解析して動かしています。
    ユーザのPCには少し負担はかかりますが、今の時代ではほとんど問題はないかと思います。

    ためしに、6時で切り替わるプログラムで、PCのシステム日付を5:59:30とかにしてhtmlファイルを開くと30秒後に勝手に切り替わります^^

  • id:tsuntsuku
    なるほど!
    いろいろありがとうございました!!助かりました!
    またどうぞよろしくお願い致します。

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません