带有click事件的Javascript日期对象

Javascript date object with click event

本文关键字：日期 对象 Javascript click 事件 带有      更新时间：2023-09-26

对stackoverflow有点新手，花了太多时间思考这个问题，但简而言之，我正在努力找出实现这一点的最佳方法和最少的代码量。我有一个条件，它将根据一天中的时间执行操作。见下文：

var date = new Date();
var time = date.getHours();
if(time < 12){
header.prepend('Morning ');
link.attr('href', 'css/morning.css');
} else if (time >= 12 && time <= 18){
header.text('its afternoon time');
link.attr('href', 'css/day.css');
} else {
header.prepend('Night ');
link.attr('href', 'css/night.css');
}

我也有一个类似的点击事件：

$('button').click(function(){
var styleswitcher = $(this).text().toLowerCase();
link.attr('href', 'css/' + styleswitcher + '.css');
});

有没有办法将它们组合成一个函数，我觉得我在重复自己在conditional和click事件中两次调用样式表。因此，如果时间和点击事件匹配，就会显示正确的样式表。谢谢你的帮助！

是的，只需将代码打包并放入函数中即可。

$(document).ready(function() {
    function change_css() {    
        var date = new Date();
        var time = date.getHours();
        var styleSwitcher = 'night';
        if(time < 12) {
            styleSwitcher = 'morning';
        }
        else if(time >= 12 && time <= 18) {
            styleSwitcher = 'day';
        }
        link.attr('href', 'css/' + styleSwitcher + '.css');
    }
    change_css(); // First call on initial run.
    $('button').click(function() {
        change_css();
    });
});

注意：我还没有时间测试这个代码，但这个想法是正确的。

相关文章：