Javascript 我可以根据时间改变背景颜色吗？_Javascript_Html_Css_Bootstrap 4

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

javascript html css bootstrap-4

Javascript 我可以根据时间改变背景颜色吗？,javascript,html,css,bootstrap-4,Javascript,Html,Css,Bootstrap 4,我用html5、CSS和bootstrap创建了一个好看的网站。我想知道我是否可以在白天（蓝色）和晚上（暗红色）在代码中自动更改背景颜色和导航条选择颜色。我可以根据用户的时间改变导航条和背景的颜色吗？这是我的密码： <body> <nav> <h1 style="font-family:Helvetica;"> <ul class="nav"> <li>&

我用html5、CSS和bootstrap创建了一个好看的网站。我想知道我是否可以在白天（蓝色）和晚上（暗红色）在代码中自动更改背景颜色和导航条选择颜色。我可以根据用户的时间改变导航条和背景的颜色吗？这是我的密码：

<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>

这是我的全部代码。没有定制的java脚本。请帮助我的代码或学习材料或学习材料的链接，我可以用来实现逻辑。我也可以只使用CSS来实现我想要的东西吗？如果不可能，如何使用java脚本编程？

我真的很感谢你的帮助。非常感谢。

问题归结为是否可以根据一天中的时间更改CSS样式

有几种方法可以实现，但是为了获得最佳的用户体验，您可能希望在HTML生成时设置样式。这意味着服务器端在body元素上设置一个类，以指示您想要使用夜间主题。或者，您可以简单地将样式按行书写，但如果可能，最好将样式保持在外部

另一个选项是使用JavaScript在用户的浏览器中执行相同的操作。只是或是在线的。JavaScript的优点是它会尊重用户的本地时间，但是如果他们的系统时钟不正确，他们会得到不正确的主题。这还意味着，如果您关心来自不同国家/世界各地的用户，您不必担心检测用户的时区服务器端。

问题归结为是否可以根据一天中的时间更改CSS样式

只需使用

setInterval

定期（每分钟一次就足够了）调用一个函数，该函数使用JavaScript

Date

对象检查一天中的时间，然后根据需要设置背景颜色

当页面加载时调用相同的函数以使用正确的颜色启动

更新：这里有一些示例代码

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

函数init（）{
函数setBackgroundForTimeOfDay（）{
const body=document.querySelector（'body'）；
const hours=新日期（）.getHours（）；
如果（小时数<6 | |小时数>=18）
body.style['background-color']='900'；
其他的
body.style['background-color']='#46F'；
}
挫折背景fortimeofday（）；
设定时间间隔（设定时间间隔，60000）；
}

Plunker here:

只需使用

setInterval

定期（每分钟一次应该足够）调用一个函数，该函数使用JavaScript

Date

对象检查一天中的时间，然后根据需要设置背景色

当页面加载时调用相同的函数以使用正确的颜色启动

更新：这里有一些示例代码

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

函数init（）{
函数setBackgroundForTimeOfDay（）{
const body=document.querySelector（'body'）；
const hours=新日期（）.getHours（）；
如果（小时数<6 | |小时数>=18）
body.style['background-color']='900'；
其他的
body.style['background-color']='#46F'；
}
挫折背景fortimeofday（）；
设定时间间隔（设定时间间隔，60000）；
}

Plunker这里：

像这样的东西可以工作，1000意味着1秒，你必须进一步调整它，使其不那么频繁

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）

但要更改导航栏的最佳方式，请遵循以下堆栈溢出链接：

你们提供静态HTML，还是在请求时生成？我完全是个新手。我真的很抱歉，我不知道什么是静态html。我的代码有nabber和bootstrap卡，有点生动。仅此而已。你在使用javascript吗？引导卡的动画是，悬停时卡会弹出。不，没有自定义的js。你提供静态HTML，还是在请求时生成的？我完全是个新手。我真的很抱歉，我不知道什么是静态html。我的代码有nabber和bootstrap卡，有点生动。仅此而已。你在使用javascript吗？引导卡的动画是，悬停时卡会弹出。不，没有自定义js。我想根据用户的时区更改导航栏的颜色和背景颜色。我应该如何从这里开始？你能帮我提供一些学习资料或代码链接吗？我现在不在笔记本电脑旁，但我回来后会添加一些链接。谢谢！非常感谢你的帮助，伙计DI希望根据用户的时区更改导航栏的颜色和背景颜色。我应该如何从这里开始？你能帮我提供一些学习资料或代码链接吗？我不在