Question

我使用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>

这里的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脚本编程？我非常感谢你的帮助。非常感谢你。

Answer 1

定期使用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);
}

此处的Plunker：http://plnkr.co/edit/dq0nGUMvgTyHVXplrq1d?p=preview

Answer 2

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

有几种方法可以实现，但为了获得最佳用户体验，您可能希望在HTML生成时设置样式。这意味着像服务器端在body元素上设置一个类来表示你想要使用Night Time主题。或者您可以简单地编写样式，但最好在可能的情况下将样式保持在外部。

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

Answer 3

这样的事情会起作用，1000意味着1秒，你将不得不进一步调整它以减少它的频率 setInterval(()=>{ var color=new Date().getHours()>16?'red':'blue' document.querySelector('.nav').style.background=color }, 1000)

但是为了更好地对导航栏进行更改，请按照此堆栈溢出链接进行操作： Change navbar color in Twitter Bootstrap

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

3 个答案: