人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【JAVASCRIPT】時間によってCSSを変えるソースを教えてください。0時?12時まではam.css、12時?0時まではpm.cssで、JAVASCRIPTが無効な場合はam.cssが適用されるようにしたいのですが・・・。xhtml1.0宣言をしても大丈夫なソースでお願いします。
また日によってCSSを変える方法も教えてくださると嬉しいです。1月1日?3日だけ変えるなど。イルカ差し上げます。

●質問者: tsuntsuku
●カテゴリ:インターネット ウェブ制作
✍キーワード:1月1日 AM CSS JavaScript pm
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● kyosh
●48ポイント

まず、時間によって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>

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

◎質問者からの返答

ありがとうございます。

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

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

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

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


2 ● kyosh
●48ポイント ベストアンサー

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

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

正しくは↓です。

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

<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>
◎質問者からの返答

ありがとうございます!

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ