javascript - 如何使用 JavaScript 根据时间更改 CSS

标签 javascript html css

有没有办法根据一天中的特定时间(时钟)更改 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>

有什么想法吗?

提前致谢!

最佳答案

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 - 如何使用 JavaScript 根据时间更改 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38493532/

相关文章:

javascript - 强制 ember-data 从服务器重新加载特定记录

javascript - 使用 jqGrid 编辑回调发送额外参数

javascript - document.getElementById 不返回任何值

css - 取 transform : translateX option 的现有值

javascript - 错误 : document. getElementsByTagName(...)[0] 的来源未定义

javascript - 获取页面底部的页脚

html - 如何仅使用 CSS 来创建这种效果?

asp.net-mvc - 检查浏览器地理定位功能并获取纬度和经度

html - 用内容包裹垂直条

javascript - 为什么在我的 Android 上滑动 View 时 JQuery 偏移会发生变化?