我可以根据时间更改背景颜色吗? [英] Can I change what background colour should be depending upon the time?
问题描述
我使用html5，CSS，引导程序创建了一个美观的网站.我想知道是否可以在白天(蓝色)和晚上(暗红色)中通过代码自动更改背景颜色和导航栏选择颜色.我可以根据用户的时间更改导航栏和背景的颜色吗? 这是我的代码:
I created a good looking website using html5, CSS, bootstrap. I wanted to know if I can change the background colour and nav bar selection colour automatically in code during day (blue) and during night (dull red). Is there anything I can do to change the colour of nav bar and background based on user's time? Here's my code:
<body>
<nav>
<h1 style="font-family:Helvetica;">
<ul class="nav">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
<li><a class="dropdown" href="#">Menu 2</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
<li><font size="+4", color="white">IBAE</font> <br></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
</ul>
</h1>
</nav>
<br>
<br>
<br>
<br>
<br>
<div class="container-fluid"> <!-- Cards-->
<div class="row">
<!--row one column two-->
<div class="col-sm-3"><div class="cardpop">
<div class="card img-fluid" style="width:600px">
<img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<font color="white">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</font>
</div>
</div></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
这是CSS
nav h1
{
vertical-align: middle;
background-color: rgb(0, 0, 0);
border: 10px solid rgba(0, 0, 0, 0);
text-align: center;
position: fixed;
position: top;
min-width: 100%;
z-index: 3;
}
.nav ul
{
vertical-align: middle;
-webkit-font-smoothing:antialiased;
text-shadow:0 1px 0 rgba(255, 255, 255, 0);
background: rgb(0, 0, 0);
list-style: none;
margin: 0;
padding: 0;
width: 100%;
z-index: 3;
}
.card-img-wrap img {
transition: transform .25s;
width: 100%;
}
.card-img-wrap:hover img {
transform: scale(1.2);
}
.card-img-wrap:hover:after {
opacity: 1;
}
这是我的全部代码.没有自定义的Java脚本.请提供代码或学习材料或我可以用来实现逻辑的学习材料链接的帮助. 我也可以仅使用CSS来实现所需的功能吗? 如果不可能，如何使用Java脚本编程? 我真的很感谢事先的帮助.非常感谢.
This is my entire code. There's no custom java script. Please help me with code or study material or links for study material I could use to implement the logic. Also can I achieve what I am looking for using only CSS? If it is not possible how do I program using java script? I really appreciate the help in advance. Thank you very much.
推荐答案
只需使用setInterval定期(每分钟一次就足够了)调用使用JavaScript Date对象检查函数时间的函数.一天，然后根据需要设置背景颜色.
Just use setInterval to periodically (once per minute should be more than enough) call a function that uses the JavaScript Date object to check the time of day, then set the background colors as needed.
页面加载时调用相同的函数以正确的颜色启动.
Call that same function when the page loads to start up with the right colors.
更新:这是一些示例代码.
Update: Here's some sample code.
function init() {
function setBackgroundForTimeOfDay() {
const body = document.querySelector('body');
const hours = new Date().getHours();
if (hours < 6 || hours >= 18)
body.style['background-color'] = '#900';
else
body.style['background-color'] = '#46F';
}
setBackgroundForTimeOfDay();
setInterval(setBackgroundForTimeOfDay, 60000);
}
在此处插入: http://plnkr.co/edit/dq0nGUMvgTyHVXplrq1d?p=preview
这篇关于我可以根据时间更改背景颜色吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
