基于一天中的时间触发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内置的日期功能从系统中提取。它运行一个返回int（0-23）的getHours（）函数。 if语句(time.getHours() > 17 || time.getHours < 5)将仅运行代码并在主题为5pm之后或5am之前更改主题。希望这可以让你开始。