Question

我正在尝试开发一个网站，该网站会根据用户上网时的内容显示内容例如，当早晨时，用户将看到早晨场景内容，
在夜间，用户将看到晚安内容如何做到这一点？
我不知道应该叫什么。
任何熟悉此事的人都应该帮助谢谢

<script>
$(document).ready(function()
{
var hour = new Date().getHours();
if (hour < 10){
  // morning
  $('body').addClass("morning");
} else if (hour > 16){
  // evening
  $('body').addClass("evening");
}

// Check once every hour
setInterval(function(){
  // Remove all existing classes
  $('body').removeClass("morning evening");

  var hour = new Date().getHours();

  // Add back specific classes based on the hour
  if (hour < 10){
        // morning
        $('body').addClass("morning");
  } else if (hour > 16){
       // evening
       $('body').addClass("evening");
  }         
  }, 60000 );

});
</script>

<style type="text/css">
body.morning #background{
  background: url(images/morning.jpg);
  colour: blue;
}
body.evening #background{
   background: url(images/evening.jpg);
   colour: red;
}
</style>

在html部分：

<body>
<div id="background"></div>
</body>

Answer 1

您只需检查当前日期/时间的小时，然后测试该范围的值。根据这些检查，在正文中添加一个类，然后在级联样式表（CSS）中完成剩下的工作。

var hour = new Date().getHours();
if (hour < 10){
    // morning
    $('body').addClass("morning");
} else if (hour > 16){
    // evening
    $('body').addClass("evening");
}

等

样式示例

body.morning #background{
     background: url(images/morning.jpg)
     colour: blue;
}
body.evening #background{
     background: url(images/evening.jpg)
     colour: red;
}

如果您定期运行此检查（缓慢的setInterval），您可以在morning => lunch => evening等之间移动时获得实时动态更改。这看起来很酷：）

e.g。

之类的东西

// Check once every hour
setInterval(function(){
    // Remove all existing classes
    $('body').removeClass("morning evening");

    var hour = new Date().getHours();

    // Add back specific classes based on the hour
    if (hour < 10){
        // morning
        $('body').addClass("morning");
    } else if (hour > 16){
        // evening
        $('body').addClass("evening");
    }         
}, 60000 );

Answer 2

您可以根据一天中的时间加载不同的CSS，例如，如果您有day.css和night.css，则可以执行以下操作：

<script>
<!--
function getCSS() {
      var currentTime = new Date().getHours();

      if (7 <= currentTime && currentTime < 20) {
       document.write("<link rel='stylesheet' href='day.css' type='text/css'>");
      }
      else
      {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
      }
}

getCSS();
-->
</script>

脚本 - 显示不同内容的不同时间

2 个答案: