Question

我正在尝试根据时间切换我的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>

Answer 1

我建议您将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。（见这个答案的评论。）

Answer 2

尝试使代码可读：

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>

祝你好运！

Answer 3

无论条件是什么，您的脚本似乎都会在页面上写一个空白屏幕。

我建议根据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; }

Answer 4

例如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");

Answer 5

这是一个很好的脚本，可以让你switch CSS style sheets at runtime。

Answer 6

在执行此操作之前，您需要等到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>

使用javascript进行时间敏感的css样式表切换

6 个答案: