我可以根据时间更改背景颜色吗？

Question

I created a good looking website using html5, CSS, bootstrap. 我使用html5，CSS，引导程序创建了一个美观的网站。 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>

Here's CSS 这是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;
}

This is my entire code. 这是我的全部代码。 There's no custom java script. 没有自定义的Java脚本。 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? 我也可以仅使用CSS来实现所需的功能吗？ If it is not possible how do I program using java script? 如果不可能，如何使用Java脚本编程？ I really appreciate the help in advance. 我真的很感谢事先的帮助。 Thank you very much. 非常感谢你。

Answer 1

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. 只需使用setInterval定期（每分钟一次就足够了）调用一个使用JavaScript Date对象检查一天中的时间的函数，然后根据需要设置背景颜色。

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);
}

Plunker here: http://plnkr.co/edit/dq0nGUMvgTyHVXplrq1d?p=preview 请在此处插入： http ://plnkr.co/edit/dq0nGUMvgTyHVXplrq1d?p=preview

Answer 2

The question boils down to whether it's possible to change a CSS Style based on the time of day. 问题归结为是否有可能根据一天中的时间更改CSS样式。

There are a few ways to go about it, but for the best user experience you probably want to set the style at HTML generation time. 有几种解决方法，但是为了获得最佳的用户体验，您可能希望在HTML生成时设置样式。 That would mean something like server-side setting a class on the body element to indicate that you want to use the Night Time theme. 这意味着需要在服务器端在body元素上设置一个类，以表明您要使用Night Time主题。 Or you can simply write the style in line, but it's probably better to keep styles external when possible. 或者，您可以简单地按行编写样式，但是在可能的情况下，最好将样式保持在外部。

The other option is to do the same thing in the user's browser using JavaScript. 另一个选择是使用JavaScript在用户的浏览器中执行相同的操作。 Just set a class or set the style in-line. 只需设置一个类或直接设置样式即可。 JavaScript has the advantage that it will respect the user's local time, but if their system clock is incorrect, they'll get an incorrect theme. JavaScript的优势在于它将尊重用户的本地时间，但是如果他们的系统时钟不正确，他们将获得错误的主题。 It also means you don't have to worry about detecting the user's time zone server-side, if you're concerned about users from different parts of the country / world. 这也意味着，如果您担心来自国家/地区不同地区的用户，则不必担心检测服务器所在时区。

Answer 3

Some thing like this would work, 1000 means 1 sec, you will have to tweak it further to make it less frequent setInterval(()=>{ var color=new Date().getHours()>16?'red':'blue' document.querySelector('.nav').style.background=color }, 1000) 像这样的事情会起作用，1000表示1秒，您将不得不对其进行进一步调整，以使其不那么频繁setInterval(()=>{ var color=new Date().getHours()>16?'red':'blue' document.querySelector('.nav').style.background=color }, 1000)

But to best way to make changes to your navbar follow this stack overflow link: Change navbar color in Twitter Bootstrap 但是，要以最佳方式更改导航栏，请遵循以下堆栈溢出链接：在Twitter Bootstrap中更改导航栏颜色

我可以根据时间更改背景颜色吗？

问题描述

3 个解决方案

解决方案1
5 已采纳 2018-05-12 14:13:47

解决方案2
1 2018-05-12 14:13:03

解决方案3
0 2018-05-12 14:43:05

我可以根据时间更改背景颜色吗？

问题描述

3 个解决方案

解决方案1 5 已采纳 2018-05-12 14:13:47

解决方案2 1 2018-05-12 14:13:03

解决方案3 0 2018-05-12 14:43:05

解决方案1
5 已采纳 2018-05-12 14:13:47

解决方案2
1 2018-05-12 14:13:03

解决方案3
0 2018-05-12 14:43:05