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

script - different time showing different content

本文关键字：显示 时间 脚本      更新时间：2023-09-26

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

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

您只需检查当前日期/时间的小时并测试该值的范围。根据这些检查，向正文添加一个类，并在级联样式表 （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之间移动，您可能会获得实时动态更改。那看起来很酷:)

例如，类似的东西

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

您可以根据一天中的时间加载不同的 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>
相关文章：