时间戳

首页 > 解决方案 > 如何在此函数中使用 getMinutes 而不是 getHours

javascript - 如何在此函数中使用 getMinutes 而不是 getHours

问题描述

我正在尝试设置一个 Livestream 计划应用程序，该应用程序会根据一天中的时间每 30 分钟自动更改 css 文件并突出显示当前正在运行的程序。

目前该功能运行良好。我的问题是函数以小时为单位（getHours），这意味着 CSS 文件更改是每小时一次。

由于程序只有 30 分钟，如何将功能更改为每半小时工作一次？我尝试使用 getMinutes 但没有运气。

 // 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>

标签： javascriptjquery

解决方案

为什么不只是为您所追求的时间制定一个配置/时间表并提供样式表呢？

我没有配置完整的 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

推荐阅读