Question

I'm trying to set up a Livestream schedule app that automatically changes css files and highlights the current running program every 30 minutes according to time of day.

Currently the function is working well. My problem is the function is in hours (getHours) which means the css file changes are hourly.

How can I change the function to work every half hour since the programs will only be 30mins long? I tried using getMinutes but no luck.

 // Program Schedule highlighter

function getStylesheet() {
  var currentHour = new Date().getHours();

  if (11 <= currentHour&&currentHour < 12) {
   document.write("<link rel='stylesheet' href='600.css' type='text/css'>");
  }
  if (12<= currentHour&&currentHour < 13) {
   document.write("<link rel='stylesheet' href='630.css' type='text/css'>");
  }
  if (13 <= currentHour&&currentHour < 14) {
   document.write("<link rel='stylesheet' href='700.css' type='text/css'>");
  }
  if (14 <= currentHour&&currentHour < 15) {
   document.write("<link rel='stylesheet' href='730.css' type='text/css'>");
  }
  if (15 <= currentHour&&currentHour < 16) {
   document.write("<link rel='stylesheet' href='800.css' type='text/css'>");
  }
  if (16 <= currentHour&&currentHour < 17) {
   document.write("<link rel='stylesheet' href='830.css' type='text/css'>");
  }

}

getStylesheet();
 </script>
</head>


  <h2 align="center">Line up</h2>

  <table align="center" width="80%" max-width="300px">
  <tr>
  <th>Time</th>
  <th>Program</th>
  </tr>
  <tr>
  <td>6.00PM</td>
  <td>Maria Anders</td>
  </tr>
  <tr>
  <td>7.00PM</td>
  <td>Francisco Chang</td>
  </tr>
  <tr>
  <td>8.00PM</td>
  <td>Roland Mendel</td>
  </tr>
  <tr>
  <td>9.00PM</td>
  <td>Helen Bennett</td>
  </tr>
  <tr>
  <td>10.00PM</td>
  <td>Yoshi Tannamuri</td>
  </tr>
  <tr>
  <td>11.00PM</td>
  <td>Giovanni Rovelli</td>
  </tr>
  <tr>
  <td>12.00AM</td>
  <td>Gio Roeli</td>
  </tr>
  <tr>
  <td>1.00AM</td>
  <td>Chester Band</td>
  </tr>
  <tr>
  <td>2.00AM</td>
  <td>Lionel Rolex</td>
  </tr>
  <tr>
  <td>3.00AM</td>
  <td>Smith Weston</td>
  </tr>
  <tr>
  <td>4.00AM</td>
  <td>Jasper Beaver</td>
  </tr>
  <tr>
  <td>5.00AM</td>
  <td>Smiler Torres</td>
  </tr>
  <tr>
  <td>6.00AM</td>
  <td>John Tobres</td>
  </tr>
  </table>

  </body>
  </html>

Answer 1

为什么不只是按照您的时间进行配置/安排并提供样式表？

我没有配置整整24小时，但您应该明白这一点。如果您不打算全部使用24小时，那么我至少会使用某种后备样式表。

const sheets = [
  { start: 1100, end: 1129 , sheet: 'one.css' },
  { start: 1130, end: 1159 , sheet: 'two.css' },
  { start: 1200, end: 1229 , sheet: 'three.css' },
  { start: 1230, end: 1259 , sheet: 'four.css' },
  { start: 1300, end: 1329 , sheet: 'five.css' },
  { start: 1330, end: 1359 , sheet: 'six.css' },
  { start: 1400, end: 1429 , sheet: 'seven.css' },
  { start: 1430, end: 1459 , sheet: 'eight.css' },
  { start: 1500, end: 1529 , sheet: 'nine.css' },
  { start: 1530, end: 1559 , sheet: 'ten.css' }
  
];
const getStyleSheet = () => {
  const date = new Date();
  const time = +`${date.getHours()}${date.getMinutes()}`;
  const sheet = sheets.find( s => s.start <= time && s.end >= time );
  return sheet ? sheet.sheet : 'outside of time range';
};

console.log(getStyleSheet());

另一建议是，如果页面只是坐在那里并运行了很长时间，则使用setInterval。您可以将该间隔设置为每30分钟“勾选”，然后换出样式表。您仍需要将time映射到style sheet

Answer 2

如果要使其与您的方法相似，可以同时使用getMinutes()和getHours()并向if语句添加更多条件。

function getStylesheet() {
  var date = new Date();
  var currentHour = date.getHours();
  var minutes = date.getMinutes();

  // first set (first hour)
  if (11 <= currentHour && currentHour < 12 && minutes < 30) {
      document.write("<link rel='stylesheet' href='600.css' type='text/css'>");
  }
  else if (11 <= currentHour && currentHour < 12 && minutes >= 30) {
      document.write("<link rel='stylesheet' href='630.css' type='text/css'>");
  }

  // second hour
  if (12 <= currentHour && currentHour < 13 && minutes < 30) {
      document.write("<link rel='stylesheet' href='700.css' type='text/css'>");
  }
  else if (12 <= currentHour && currentHour < 13 && minutes >= 30) {
      document.write("<link rel='stylesheet' href='730.css' type='text/css'>");
  }
  // the rest of the conditions
  // ...
}

我只包含了前两套条件，但希望您能理解。

或者您可以稍微简化一下：

  // first set (first hour)
  if (11 <= currentHour && currentHour < 12) {
      if (minutes < 30) {          
          document.write("<link rel='stylesheet' href='600.css' type='text/css'>");
      } else {
         document.write("<link rel='stylesheet' href='630.css' type='text/css'>");
      }
  }
  // etc...

由于getHours()返回一个整数，您只需要在它等于某个特定值时进行比较，就可以将其简化为：

  // first set (first hour)
  // midnight
  if (currentHour == 0) {
      if (minutes < 30) {          
          document.write("<link rel='stylesheet' href='000.css' type='text/css'>");
      } else {
         document.write("<link rel='stylesheet' href='030.css' type='text/css'>");
      }
  }
  // next
  if (currentHour == 1) {
      if (minutes < 30) {          
          document.write("<link rel='stylesheet' href='100.css' type='text/css'>");
      } else {
         document.write("<link rel='stylesheet' href='130.css' type='text/css'>");
      }
  }
  // etc...

How can I use getMinutes in this function instead of getHours

2 个答案: