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

Question

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

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

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

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

编辑：

TIA

Answer 1

您可以使用 JavaScript 进行此操作，您可以创建一个新文件 .js，或者只需在 html 中的 <script> 标记之间添加 JavaScript。

你应该使用这个函数实际计算小时数：

<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 语句，并输入您喜欢的时间。

Answer 2

您在评论中编写的代码有些地方不正确，您不需要使用 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";
    }
}

希望这对你有用。

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

Change image on home page according to time of day with CSS?

css

svg

svg-animate