如何随时间改变元素的外观？

Posted 2023-03-06

【中文标题】如何随时间改变元素的外观？

【英文标题】：How to change elements' appearance with time of the day?

【发布时间】：2021-12-20 06:40:00

【问题描述】：

我想根据一天中的时间更改元素的背景图像并更改标题的内容。如果时间在6点到12点之间，bg和文字必须按照早上来。

【参考方案1】：

您不能只使用 css 和 html。 你应该使用js。

如果你设置你的夜间、白天时间 CSS，你可以使用这个技巧：

var date = new Date;
var hour = date.getHours();
if(hour > 18 || hour < 6)
    document.body.className += ' nighttime-css';
    // JQUERY => $('body').addClass('nighttime-css')
else
    document.body.className += ' daytime-css';
    // JQUERY => $('body').addClass('daytime-css')

css：

.nighttime-css背景：url('nighttime-bg.jpeg');

.daytime-css背景：url('daytime-bg.jpeg');

【讨论】：

我不明白 document.body.className += 'daytime-css' 的意思； // JQUERY => $('body').addClass('daytime-css')

@HunainAhmed 如果你添加班级背景会改变