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-tricks示例，并且应该为您提供一个起点。

此代码未经测试且可以进行改进（你最后会有很多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
  }
}

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

1 个答案: