Question

我一直在努力改善我的网站，以便在我的大学里完成一个项目。我到底想要做的是根据时间改变背景。想象一下这种情况，根据特定的白天时间将背景颜色更改为线性渐变背景图像。

实施例：从早上7点到下午1点，有这样的背景：背景：线性渐变（底部，黄色0％，红色100％）从下午1点到下午6点，有这样的背景：背景：线性渐变（到底部，＃003366 0％，＃000d1a 100％）; 而对于其他人，有这样的背景：背景：线性渐变（到底部，＃000d1a 0％，＃000000 100％）;

我到目前为止所有这些都可以帮助我找到一种使用JavaScript在HTML上进行操作的方法，是这样的：

On HTML:

<script type=”text/javascript” src=”script.js”> </script>


var date=new Date();

var hour=data.getHours();

if (hour<13)
{
    alert("Good Morning!");
}
else if (hour<18)
{
    alert("Good Evening!");
}
else 
{
    alert("Good Night!");
}

（使用命令“alert”作为我可以适应它的一个例子来改变背景，这是我目前正在寻找的命令）

我想为任何错误的语法或目录或其他任何我做错的事道歉。随意纠正我的一切。

如果有人可以在html上给我一个简单的HTML语法示例，其中包含javascript代码，而不是在另一个目录中，这真的有帮助！无论哪种方式，感谢您抽出宝贵时间帮助我！ = d

如果一切按预期进行，我会在这里发布我的网站与大家分享，我认为人们看到彼此的项目是一件好事。在我目前正在工作的项目中，我负责网站开发，这将向用户展示在国内/公司区域使用光伏板的利弊，同时使用太阳能跟踪设备在上面。在网站上，我们将得到与其相关的所有内容的结果，我将确保将其从葡萄牙语翻译成英语。祝你有个美好的一天。

Answer 1

您可以使用超时来检查当前时间。

function VerifyTime(){

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

    if (hour<13)
    {
        alert("Good Morning!");
    }
    else if (hour<18)
    {
        alert("Good Evening!");
    }
    else 
    {
        alert("Good Night!");
    }
}

window.setTiemout(function(){VerifyTime()},<time>})

时间以毫秒表示：1秒= 1000，我建议您每分钟检查60000或每秒检查1000

Answer 2

只需使用CSS类来显示所需的背景：

<style>
.morning{
  background: morningColor;
}
.evening{
  background: eveningColor;
}
.night{
  background: nightColor;
}
</style>

然后通过添加相应的类来替换您的警报：

<script> 
  var hour=new Date().getHours(); // get current hour value
  var elem = document.body.getElementById(<your element id>); // you can trigger a specific element via id for example
  if (hour<13){
    elem.className += 'morning';
  }
  else if (hour<18){
    elem.className += 'evening';
  }
  else{
    elem.className += 'night';
  }
</script>

Answer 3

我认为这就是你想要做的事情：

var date = new Date();

var hour = date.getHours();

if (hour < 13) {
  alert("Good Morning!");
  document.body.classList.add('morning'); // Based on the current time, add a class to the document's body
} else if (hour < 18) {
  alert("Good Evening!");
  document.body.classList.add('evening');
} else {
  alert("Good Night!");
  document.body.classList.add('night');
}

.morning {
  background-color: lightblue;
}

.evening {
  background-color: orange;
}

.night {
  background-color: black;
}

/** These colours are just examples, style them in the way you need them to be */

如何根据当前时间不断更改背景图像/颜色？

3 个答案: