2

我正在尝试根据时间切换我的 CSS 样式表。一个白天，一个晚上。当谈到 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

我建议您将 body 元素上的类从“day”更改为“night”，而不是更改 css 文件。然后使用 css 文件中的类选择器。

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

更新：然后使用Javascript document.body.className='day';进行更改。感谢@Phrogz 的 JS。（请参阅对此答案的评论。）

于 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();">

这样您就可以将代码放在文档的部分中。

通过设置这个类名，你可以编写早上或晚上的 CSS 规则，在它们前面加上“.morning”或“.evening”，如下所示：

.morning h1{ color:blue; }
.evening h1{ color:red; }
于 2010-12-05T04:51:49.543 回答
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你可以做如下

把它包在你的 if 类中

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

("body").removeClass('bg1').addClass("bg2");
于 2010-12-05T04:48:31.223 回答
0

这是一个很好的脚本，它允许您在运行时切换 CSS 样式表。

于 2010-12-05T05:01:15.653 回答
-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 回答