JS按时间切换页面背景无报错不生效如何解决

原代码的几个错误点 #

• 操作对象完全错了：你定义的img是个普通字符串，不是页面上的DOM元素，给字符串加backgroundImage属性没有任何实际效果，根本不会修改页面样式，所以看不到背景变化。
• 分支语法写错了：JS里else后面不能跟条件判断，你最后一个分支写的else (n > 18 && n < 20)是无效语法；另外原时间判断没覆盖整点，比如6点、8点、18点、20点这些时刻匹配不到任何规则。
• 元素样式缺漏：用来放背景的内层div没有设置高度，默认高度是0，就算背景图加载成功也显示不出来。
• CSS字体声明写错了：原代码里font: areial是无效写法，字体属性要按规范写，而且字体名Arial也拼错了。

修复后完整代码 #

<style>
    body,
    html {
        height: 100%;
        margin: 0;
    }

    .bgimg {
        height: 100%;
        background-position: center;
        background-size: cover;
        position: relative;
        color: black;
        font-family: Arial;
        font-size: 25px;
    }

    .bg-content {
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: cover;
    }
</style>

<div class="bgimg">   
    <div class="bg-content" id="bgWrap"></div>
    <script>
        // 先拿到要设置背景的真实DOM节点
        const bgWrap = document.getElementById('bgWrap');
        const hour = new Date().getHours();
        let bgPath = '';

        if (hour >= 20 || hour < 6) {
            bgPath = 'url(midnight.png)';
        } else if (hour >= 6 && hour < 8) {
            bgPath = 'url(sunrise.png)';
        } else if (hour >= 8 && hour < 18) {
            bgPath = 'url(noon.png)';
        } else {
            // 剩余区间自然是18点到20点，不需要重复判断
            bgPath = 'url(sunset.png)';
        }

        // 给DOM节点设置内联样式
        bgWrap.style.backgroundImage = bgPath;
    </script>
</div>

注意事项 #

• 确认四张背景图和HTML文件的路径对应，如果图片放在其他文件夹，要把url()里的路径写对，否则会加载失败。
• 如果需要背景实时跟着时间变（比如用户一直开着页面到下一个时段自动切换），可以把时间判断和设置背景的逻辑放到定时器里，每间隔一段时间检查一次当前时间更新背景即可。

内容的提问来源于stack exchange，提问作者arguingson 123