javascript - 根据一天中的时间触发 javascript 事件

Question

我正在寻求帮助，看看是否有一种简单快捷的方法可以根据网站在浏览器中打开的时间来触发 JS 事件。

基本上我想做的是在用户本地时区的下午 5 点到凌晨 5 点之间触发此脚本。该脚本当前连接到一个按钮，该按钮只需将页面主体的类别翻转为“夜间模式”。我希望两者能够协调工作，根据时间实现自动化，并且如果您想要深色或浅色主题，则能够使用按钮进行覆盖。

function toggleClass(element, className) {
if (!element || !className) {
    return;
}
var classString = element.className,
    nameIndex = classString.indexOf(className);
if (nameIndex == -1) {
    classString += ' ' + className;
} else {
    classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length);
}
element.className = classString;
}

document.getElementById('day-btn').addEventListener('click', function() {
    toggleClass(document.getElementById('body'), 'night');
});

https://jsfiddle.net/simpson/57xe333n/2/

Answer 1

var time = new Date();
element = document.getElementById('body');
className = "night";
console.log(time.getHours());
if(time.getHours() > 17 || time.getHours < 5) {
    if (!element || !className) {
        return;
    }
    var classString = element.className,
        nameIndex = classString.indexOf(className);
    if (nameIndex == -1) {
        classString += ' ' + className;
    } else {
        classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length);
    }
    element.className = classString;
}

这使用了从系统中提取的 JS 内置日期功能。它运行一个 getHours() 函数，该函数返回一个 int(0-23)。 if 语句 (time.getHours() > 17 || time.getHours < 5)然后，仅在下午 5 点之后或凌晨 5 点之前运行代码并更改主题。希望这可以帮助您入门。