Question

有没有办法根据当天的特定时间（时钟）更改 background-color 属性或任何 CSS 属性？

例如：对于（9:00 - 12:00），背景颜色应为绿色，从12:00至15:00为红色，依此类推。我不知道是否可以使用javascript或php。我玩了一些时间间隔，但每次刷新页面时都会重置间隔。

注意： 说我在9:00打开页面（我看到绿色背景）然后关闭它。如果我在11:00再次打开它，页面仍应为绿色。

这是我的HTML

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <style>
            .timeDep {
                width:200px;
                height:200px;
                background-color: #eee;
                margin: 50px auto 0 auto;
            }
        </style>
</head>
<body>
    <script>
        $(function(){
                //Code
            });
    </script>

    <div class='timeDep'></div>
</body>
</html>

有什么想法？

提前致谢！

Answer 1

Javascript将是一个简单的解决方案。只需要获取当前小时并根据时间设置背景颜色。

var d = new Date();
var currHour = d.getHours();
if (currHour >= 9 && currHour <= 12) {
    document.body.style.backgroundColor = "green";
} else if (currHour > 12 && currHour < 17) {
    document.body.style.backgroundColor = "red";
}

如何使用JavaScript更改CSS的时间

1 个答案: