Могу ли я изменить цвет фона в зависимости от времени? - PullRequest
Новая
       0

Могу ли я изменить цвет фона в зависимости от времени?

0 голосов
/ 12 мая 2018

Я создал красивый веб-сайт с использованием html5, CSS, начальной загрузки. Я хотел узнать, смогу ли я автоматически изменить цвет фона и цвета панели навигации в коде днем ​​(синий) и ночью (тускло-красный). Что я могу сделать, чтобы изменить цвет панели навигации и фона в зависимости от времени пользователя? Вот мой код: 

<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-скрипт? Я действительно ценю помощь заранее. Большое спасибо.

Ответы [ 3 ]

0 голосов
/ 12 мая 2018

Просто используйте 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

0 голосов
/ 12 мая 2018

Что-то вроде этого будет работать, 1000 означает 1 секунду, вам придется подправить его дальше, чтобы сделать его менее частым setInterval(()=>{ var color=new Date().getHours()>16?'red':'blue' document.querySelector('.nav').style.background=color }, 1000)

Но чтобы лучше всего внести изменения в вашу панель навигации, воспользуйтесь этой ссылкой переполнения стека: Изменить цвет навигационной панели в Twitter Bootstrap

0 голосов
/ 12 мая 2018

Вопрос сводится к тому, можно ли изменить стиль CSS в зависимости от времени суток.

Есть несколько способов сделать это, но для лучшего пользовательского опыта вы, вероятно, захотите установить стиль во время генерации HTML.Это означало бы что-то вроде серверной установки класса для элемента body, чтобы указать, что вы хотите использовать тему Night Time.Или вы можете просто написать стиль в строке, но, возможно, лучше сохранить стили, когда это возможно.

Другой вариант - сделать то же самое в браузере пользователя, используя JavaScript.Просто установите класс или установите стиль в строке.Преимущество JavaScript в том, что он будет учитывать местное время пользователя, но если его системные часы будут неправильными, они получат неправильную тему.Это также означает, что вам не нужно беспокоиться об обнаружении серверной части часового пояса пользователя, если вы беспокоитесь о пользователях из разных частей страны / мира.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...