Javascript 时间和工作日/周末 CSS 更改

Question

我正在尝试编写一个脚本来实现以下目的:

• 我需要根据一天中的时间和星期几将我页面上某个元素的颜色从绿色更改为红色。因此，例如，在星期六我需要一个不同于星期一的时间窗口。

我正在努力寻找有用的东西。我找到了几个根据时间更改 CSS 的脚本，但找不到根据时间和日期更改 CSS 的脚本。有没有我可以使用的脚本？

我发现的脚本会根据时间更改 CSS: https://css-tricks.com/snippets/javascript/different-stylesheet-pending-the-time-of-day/

http://code.tutsplus.com/tutorials/how-to-create-a-time-based-css-style-sheet-switcher--net-22814

====

这对我有用(从我认识的人那里得到了一些帮助):

function getStylesheet() {
var currentTime = new Date().getHours();
var currentDay = new Date().getDay();

document.write("<link rel='stylesheet' href='css/close.css'         
type='text/css'>");
   if (1 <= currentDay&&currentDay < 6){
   // mon/tue/wen/thu/fri
   if (8 <= currentTime&&currentTime < 18) {
   document.write("<link rel='stylesheet' href='css/open.css'    
   type='text/css'>");
} 
} else if (currentDay === 6) { 
  // Its Saturday
  if (10 <= currentTime&&currentTime < 17) {
  document.write("<link rel='stylesheet' href='css/open.css'     
  type='text/css'>");
  }     
 } 
}
getStylesheet();

Answer 1

您需要通过 Date().getDay 将日期合并到您的脚本中。下面的代码扩展了您链接到的 CSS 技巧示例，应该可以为您提供一个起点。

这段代码未经测试，可以改进(到最后你会有一大堆 if 语句)

这是代码的工作示例，用简单的输出代替交换样式表 - http://codepen.io/tonyedwardspz/pen/bVoprx?editors=101 (在当前状态下它只会在星期三工作，我不喜欢写所有的 if 语句)

function getStylesheet() {
  var currentTime = new Date().getHours();
  var currentDay = new Date().getDay();

  if (currentDay === 0){
    // Its Sunday
    if (currentTime < 5) {
     document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
    }else if (currentTime < 11) {
     document.write("<link rel='stylesheet' href='morning.css' type='text/css'>");
    }else if (currentTime < 16) {
     document.write("<link rel='stylesheet' href='day.css' type='text/css'>");
    } else if (currentTime < 22) {
     document.write("<link rel='stylesheet' href='evening.css' type='text/css'>");
    }else if (currentTime <= 24) {
     document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
    }
  } else if (currentDay === 1){
    // Its Monday
  } else if (currentDay === 2){
    // Its Tuesday
  }
}