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

Question

tsuntsuku

90

90もっと見る

96pt

インターネットウェブ制作

【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

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.1

kyosh14352007/11/20 23:56:38

48pt

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

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

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

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

<html>

<head>

</head>

<body>

</body>

</html>

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

ありがとうございます。

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

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

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

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

2007/11/21 00:27:12

kyosh 2007/11/21 01:33:55

回答数にカウントされてしまうともったいないので、ここで…。
タイムラグですが、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>
kyosh 2007/11/21 01:42:40

作ってる最中に気付かなかったあたり、我ながらアホですね、、、orz
tsuntsuku 2007/11/21 01:47:56

onloadで呼び出した時にインターバルを1秒に設定するのはどうしてなんですか？？
すいません・・・JAVASCRIPT全く分かりません(^_^;;)
この機会に勉強させていただきます。
tsuntsuku 2007/11/21 01:55:21

インターバル自体？？です(T_T)
普通に間隔でいいんですか？
kyosh 2007/11/21 02:00:35

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
tsuntsuku 2007/11/21 02:04:54

ということは6時にCSSを切り替える場合、画面を見てるとリロードしなくてもいきなり切り替わるんですか？もしそうならうれしいですが、1秒毎に処理しているということはサーバーには負担にならないんでしょうか？全くの無知ですみません・・・
kyosh 2007/11/21 02:12:28

はい、リロードしなくても勝手に切り替わります。
JavaScriptはサーバ側ではなくて、ローカル(ユーザPC)のほうで動くので、サーバに負担はかかりません。
ブラウザが解析して動かしています。
ユーザのPCには少し負担はかかりますが、今の時代ではほとんど問題はないかと思います。

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

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

KYOO.MEMO*creating Net Media - 夜12時から朝5時限定のおしゃべり場所 2008-10-09 05:16:35

夜12時から朝5時限定のおしゃべり場所てなわけでサイト作ってみました。まぁ正直つくってるとゆっても、KSBBEASYさん、はまちちゃんさん、hatenaquestionのエントリーにあったkyoshさんの色々

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

kyosh · Accepted Answer · 2007-11-21T00:54:49+09:00

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

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

正しくは↓です。

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

<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>

kyosh · Accepted Answer · 2007-11-21T00:54:49+09:00

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

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

正しくは↓です。

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

<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>

ベストアンサー

kyosh14352007/11/21 00:54:49

その他の回答（1件）

kyosh14352007/11/20 23:56:38

kyosh14352007/11/21 00:54:49ここでベストアンサー

コメント（8件)

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

トラックバック