JS背景渐变随时间切换失效：控制台与条件正常但背景未变

我仔细看了你的代码，控制台日志正常说明逻辑判断完全没问题，问题出在CSS属性值的语法错误上，导致浏览器无法正确解析渐变背景：

具体错误点 #

• 渐变值开头的多余空格：你在background-image的值里，linear-gradient前面都加了一个空格（比如' linear-gradient(...)'），这个空格会让浏览器把整个值识别为无效的渐变语法，直接忽略这个样式。
• 颜色值缺少#前缀：第三个条件里的渐变最后一个颜色00b253没有加#，变成了无效的颜色值，导致整个渐变规则失效。

修正后的JavaScript代码 #

var today = new Date(); 
var time = today.getHours() 
$(document).ready(function(){ 
    if(time <6 || time > 21) { 
        $('.tester').css({ 
            'background-image' : 'linear-gradient(#483475,#141852, #070B34,#000)', 
        }) 
        console.log(1); 
    } 
    if(time >= 6 && time < 9) { 
        $('.tester').css({ 
            'background-image' : 'linear-gradient(#c6c6dc,#a8b4d6, #fabf67,#f9a05a)', 
        }) 
        console.log(2); 
    } 
    if(time >= 9 && time < 19) { 
        $('.tester').css({ 
            'background-image' : 'linear-gradient(#2fcbff,#2f63ff, #fabf67,#00b253)', 
        }) 
        console.log(3); 
    } 
    if(time >= 19 && time < 21) { 
        $('.tester').css({ 
            'background-image' : 'linear-gradient(#c6c6dc,#a8b4d6, #fabf67,#f9a05a)', 
        }) 
        console.log(4); 
    } 
});

修正说明 #

1. 去掉了所有linear-gradient前面的多余空格，确保CSS属性值语法正确；
2. 给第三个渐变里的00b253加上了#前缀，变成有效的十六进制颜色值#00b253。

另外，建议你可以用else if来优化条件判断，避免不必要的条件检查，让逻辑更清晰：

$(document).ready(function(){ 
    if(time <6 || time > 21) { 
        $('.tester').css({ 
            'background-image' : 'linear-gradient(#483475,#141852, #070B34,#000)', 
        }) 
        console.log(1); 
    } else if(time >= 6 && time < 9) { 
        $('.tester').css({ 
            'background-image' : 'linear-gradient(#c6c6dc,#a8b4d6, #fabf67,#f9a05a)', 
        }) 
        console.log(2); 
    } else if(time >= 9 && time < 19) { 
        $('.tester').css({ 
            'background-image' : 'linear-gradient(#2fcbff,#2f63ff, #fabf67,#00b253)', 
        }) 
        console.log(3); 
    } else if(time >= 19 && time < 21) { 
        $('.tester').css({ 
            'background-image' : 'linear-gradient(#c6c6dc,#a8b4d6, #fabf67,#f9a05a)', 
        }) 
        console.log(4); 
    } 
});

内容的提问来源于stack exchange，提问作者Fire Elemental