使用 CSS 根据一天中的时间更改主页上的图像？

Question

我正在尝试创建以下内容：

我有五个 svg，每个代表一天中的不同时间。早上、中午、下午等。

是否可以根据用户所在位置的时间来更改图像？如果可以，仅使用 CSS 可以实现吗？ （到目前为止我只熟悉 HTML 和 CSS）。如果没有，一般来说实现它的最简单方法是什么？

到目前为止我发现的所有帖子或线程都使用其他语言。

编辑：

TIA

Answer 1

您在评论中编写的代码有一些不正确的地方，您不需要使用innerHTML，只需使用 document.getElementById("img").src 代替即可。

使用 JavaScript 的一个好技巧是将其放在一个函数上，并在页面加载时调用该函数。如果您使用 cpoy 这段代码，它应该可以正常工作：

window.onload = changeImage;

function changeImage() {
    const time = new Date().getHours();

    if (time < 6) {
        document.getElementById("img").src = "img/meerkat_five.svg";
    } else if (time < 9) {
        document.getElementById("img").src = "img/meerkat_one.svg";
    } else if (time < 14) {
        document.getElementById("img").src = "img/meerkat_two.svg";
    } else if (time < 17) {
        document.getElementById("img").src = "img/meerkat_three.svg";
    } else if (time < 20) {
        document.getElementById("img").src = "img/meerkat_four.svg";
    }
}

我希望这对您有用。

Answer 2

您可以使用 JavaScript 来实现此目的，您可以创建一个新文件 .js，或者只是在 html 中的

您应该使用此函数实际获取小时：

<script type=»text/javascript»>

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

</script>

然后您只需将获得的小时与您想要的时间进行比较，并更改图像：

<script type=»text/javascript»>

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

if (hour > 12) {
     document.getElementById("img").src="img/day.png";
}

</script>

在您的 html 中，您必须有一个

<img id="img" src="img/picture.png"> 

您只需要更改 if 语句，并输入您喜欢的时间。