2

時間に応じてcssスタイルシートを切り替えようとしています。1つは日中、もう1つは夜間です。私はJavaに関しては初心者ですが、javascriptをたくさん読んでいて、これを機能させるコードを生成しました。もちろん試してみましたが、うまくいきません。

コードをヘッダーに配置してから、タグの直後に配置してみましたが、どちらも機能しませんでした。

cssスタイルシートはそれ自体で機能しますが、スクリプトで使用するとまったく機能しません。これは私にそれが正しくないスクリプトであると信じさせる。多分私はそれを間違って書いたのですか？

javascriptコードは次のとおりです。

<script language="JavaScript">
  var d=new Date();
  var twi_am_start = 4;
  var twi_am_end = 5;
  var twi_pm_start = 17;
  var twi_pm_end = 18;
  if (d.getHours() < twi_am_start || d.getHours() > twi_pm_end)
    document.write('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/nighttime.css" type="text/css">');

  else if (d.getHours() > twi_am_end && d.getHours() < twi_pm_start )

    document.write('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/daytime.css" type="text/css">');

  else
    document.write('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/nighttime.css" type="text/css">');

</script>
4

6 に答える 6

2

css ファイルを変更するのではなく、body 要素のクラスを「昼」から「夜」に変更することをお勧めします。次に、css ファイルでクラス セレクターを使用します。

css file
.day h2 {font-weight: bold;}
.night h2  {font-weight: normal;}
... etc

更新: 次に、Javascript document.body.className='day';を使用して変更します。JS の @Phrogz に感謝します。（この回答へのコメントを参照してください。）

于 2010-12-05T04:49:05.360 に答える
1

そのコードを読みやすくしてみてください:

var d = new Date();

var twi_am_start = 4;
var twi_am_end = 5;
var twi_pm_start = 17;
var twi_pm_end = 18;

if (d.getHours() < twi_am_start || d.getHours() > twi_pm_end)
{
  document.write('');
} else if (d.getHours() > twi_am_end && d.getHours() < twi_pm_start ) {
  document.write('');
} else {
  document.write('');
}

http://css-tricks.com/snippets/javascript/different-stylesheet-pending-the-time-of-day/の記事が大いに役立ちます。

これはあなたのニーズに十分なコード例です：

<script type="text/JavaScript">
<!--
function getStylesheet() {
      var currentTime = new Date().getHours();
      if (0 <= currentTime&&currentTime < 5) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
      }
      if (5 <= currentTime&&currentTime < 11) {
       document.write("<link rel='stylesheet' href='morning.css' type='text/css'>");
      }
      if (11 <= currentTime&&currentTime < 16) {
       document.write("<link rel='stylesheet' href='day.css' type='text/css'>");
      }
      if (16 <= currentTime&&currentTime < 22) {
       document.write("<link rel='stylesheet' href='evening.css' type='text/css'>");
      }
      if (22 <= currentTime&&currentTime <= 24) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
      }
}

getStylesheet();
-->
</script>

<noscript><link href="main.css" rel="stylesheet" type="text/css"></noscript>

幸運を！

于 2010-12-05T04:48:51.720 に答える
1

あなたのスクリプトは、どの条件が真であるかに関係なく、空白の画面をページに書き込むようです。

if/else のどのブランチに到達したかに応じて、本体にクラスを追加することをお勧めします。

function setTimesStyles(){
  if( ... )
    document.body.className = 'morning';
  else
    document.body.className = 'evening';
}

私が行ったように、これを関数に入れると、ページの読み込み時に次のように呼び出すことができます。

<body onload="setTimeStyles();">

そうすれば、ドキュメントのセクションにコードを配置できます。

このクラス名を設定すると、次のように「.morning」または「.evening」を先頭に付けることで、朝または夕方の CSS ルールを記述できます。

.morning h1{ color:blue; }
.evening h1{ color:red; }
于 2010-12-05T04:51:49.543 に答える
0

これは、実行時にCSSスタイルシートを切り替えることができる優れたスクリプトです。

于 2010-12-05T05:01:15.653 に答える
0

たとえばasp

スタイルシートを含めながら、サーバー側のコードを使用してこれを実現できます。

<%if day then%>

<LINK href="day.css" rel="stylesheet" type="text/css">

<%else %>

<LINK href="night.css" rel="stylesheet" type="text/css">

<%
end if%>

jqueryでuは以下のように行うことができます

ifクラスでラップします

("body").removeClass('bg2').addClass("bg1");

("body").removeClass('bg1').addClass("bg2");
于 2010-12-05T04:48:31.223 に答える
-2

この操作を実行する前に、DOMのロードが完了するまで待つ必要があります。

jQueryを使用してこれを行う方法は次のとおりです。

<script type="text/javascript" charset="utf-8">
//<![CDATA[
$(function() {
var d=new Date();
var twi_am_start = 4;
var twi_am_end = 5;
var twi_pm_start = 17;
var twi_pm_end = 18;
if (d.getHours() < twi_am_start || d.getHours() > twi_pm_end) {
    $('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/nighttime.css" type="text/css">').appendTo("head");
} else if (d.getHours() > twi_am_end && d.getHours() < twi_pm_start ) {
    $('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/daytime.css" type="text/css">').appendTo("head");;
} else {
    $('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/nighttime.css" type="text/css">').appendTo("head");;
}
});
//]]>
</script>
于 2010-12-05T04:45:44.640 に答える