Question

我已经尝试解决了4个多小时，对于我来说，堆栈中的所有问题（已经回答的问题）都没有，这是代码：

<html>
<head>
  <style>
    .day {
      background-image: url(test2.png);
    }
    
    .night {
      background-image: url(test.png);
    }
  </style>
</head>
<body class="day" class="night">
  <script>
    setInterval(function() {
      var d = new Date();
      var n = d.getHours();
      if (n > 23 || n < 6) {
        document.body.className = "night";
      } else {
        document.body.className = "day";
      }
      console.log("test");
    }, 1000 * 60 * 60);
  </script>
</body>
</html>

我希望晚上的背景是晚上11点到早上7点，其余时间则是白天。

您可能会看到，那些test.png图片被更改了，而不是原始的，所以您看不到我想要的图片，因为它们包含少量的污渍，请随时在其中放置您自己的测试图像。

Answer 1

您的逻辑是完美的，并且可以按预期工作（我将图像更改为彩色，因为尝试代码段时StackOverflow出现了错误）。

唯一的问题（对您来说是个问题，对其他人则是设计功能）是setInterval在第一个间隔完成后开始。换一种说法;您必须等待一个小时才能看到结果。

在我的补丁程序中，我将JavaScript移到了一个单独的函数上，setInterval提到了该函数，然后立即调用了该函数。

我还删除了主体上的double类，因为它将由函数设置。

编辑：我忘了提到此代码可能会出现双重类别（day和night）。您应该编写一些逻辑以在应用day时删除night，反之亦然。

Edit2：我稍微改变了方程式。 n不能大于23，但是可以大于23。此外，您想将其更改为7左右的天，其中包括6。所以您的方程式应该是正确的。

如用户Salman A所述，您应缩短间隔时间。如果用户从6:58开始浏览您的网站，并且在一个页面上停留了一个小时（我不知道您网站的业务，但这很长），那么背景将在7:58左右改变。因此，将您的间隔减少到大约1或2分钟（1000 * 60 * 1或1000 * 60 * 2）。

<html>
<head>
  <style>
    .day {
      background-color: #ccc;
    }
    
    .night {
      background-color: #333;
    }
  </style>
</head>
<body>
  <script>
    setInterval(change_background, 1000 * 60 * 60);

    function change_background() {
      var d = new Date();
      var n = d.getHours();
      console.log(n);
      if (n == 23 || n < 7) {
        document.body.className = "night";
      } else {
        document.body.className = "day";
      }
      console.log("test");
    }

    change_background();
  </script>
</body>

</html>

根据当地时间更改背景图片

1 个答案: