根据时间发送javascript事件

时间:2017-05-03 16:15:29

标签: javascript

我正在寻找帮助,看看是否有一种简单快捷的方法可以根据网站在浏览器中打开的时间来触发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/

1 个答案:

答案 0 :(得分: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点之前更改主题。希望这可以帮助你开始。