Блог

Главная - Вопросы по программированию - Есть ли какой-либо способ реализовать ночной и дневной режим на статическом html-сайте?

Есть ли какой-либо способ реализовать ночной и дневной режим на статическом html-сайте?

#javascript #html

#javascript #HTML

Вопрос:

Мне нужно реализовать функциональность ночного / дневного режима, как на сайте justanotherpanel. у меня нет базы данных, но у меня есть панель администратора, где я пишу только html, css и javascript

есть ли способ, когда пользователь входит в систему и нажимает на кнопку, режим веб-сайта переходит в ночной режим, добавляя класс, и когда они выходят из системы и снова входят в ночной режим, все еще включен …?

сайт ref использовал этот код

 var mode =  false ;

    $('#nightmode').on('click', function() {
        mode = !mode;
        if (mode) {
            $(this).removeClass('fa-moon-o');
            $(this).addClass('fa-sun-o');

            daymode = $('.daymode').removeClass('daymode');
            daymode.addClass('nightmode');
            $.get('/changevariable/custom_variable_1?value=2', function() {

            });
        } else {
            $(this).removeClass('fa-sun-o');
            $(this).addClass('fa-moon-o');

            nightmode = $('.nightmode').removeClass('nightmode');
            nightmode.addClass('daymode');

            $.get('/changevariable/custom_variable_1?value=1', function() {

            });
        }
    });

Комментарии:

1. Вы можете либо записать предпочтения пользователя на стороне сервера в своей базе данных, а затем при следующем входе в систему (с любого устройства) вы можете получить выбранное значение и применить правильную тему. Или вы можете сохранить его локально в локальном хранилище браузера. Таким образом, настройка может применяться в любое время, даже когда пользователь вышел из системы, но если он войдет в систему с другого устройства, ему придется установить ее снова. Итак, выберите, какой вид сохранения вы предпочитаете

2. у меня нет доступа к базе данных

Ответ №1:

Вы можете использовать localStorage для установки режима для веб-сайта. Он будет сохранен в браузере пользователя даже после перезагрузки.

     $(document).ready(function(){
       // Set the website mode when the page is loaded.

       var mode = localStorage.getItem('theme');

       // Set the selected theme if existing or else set the default theme.

          if(mode !== null){
              // Set the mode
              if(mode == "light"){
                $(this).removeClass('fa-moon-o');
                $(this).addClass('fa-sun-o');

                 daymode = $('.daymode').removeClass('daymode');
                 daymode.addClass('nightmode');

              } else if(mode == "night") {
                $(this).removeClass('fa-sun-o');
                $(this).addClass('fa-moon-o');

                nightmode = $('.nightmode').removeClass('nightmode');
                nightmode.addClass('daymode');

              }
          } else {
               // If no modes are selected. Define a default mode.
               $(this).removeClass('fa-moon-o');
               $(this).addClass('fa-sun-o');

               daymode = $('.daymode').removeClass('daymode');
               daymode.addClass('nightmode');
               localStorage.setItem("theme", "light")
          }

    })

    $('#toggleThemeMode').on('click', function() {
          var mode = localStorage.getItem('theme');
          if(mode !== null){
              // Toggle the selected modes.
              if(mode == "night"){
                $(this).removeClass('fa-moon-o');
                $(this).addClass('fa-sun-o');

                 daymode = $('.daymode').removeClass('daymode');
                 daymode.addClass('nightmode');
                 localStorage.setItem("theme", "light")

              } else if(mode == "light") {
                $(this).removeClass('fa-sun-o');
                $(this).addClass('fa-moon-o');

                nightmode = $('.nightmode').removeClass('nightmode');
                nightmode.addClass('daymode');

                localStorage.setItem("theme", "night")
              }
          } else {
               // If no modes are selected. Define a default mode.
               $(this).removeClass('fa-sun-o');
               $(this).addClass('fa-moon-o');

               nightmode = $('.nightmode').removeClass('nightmode');
               nightmode.addClass('daymode');

               localStorage.setItem("theme", "night")
          }
        };

Комментарии:

1. когда я помещаю консоль, чтобы показать мне нулевое значение, ничего не меняется $(‘#toggleThemeMode’).on(‘click’, function() { console.log(«запущенный щелчок»); var mode = localStorage.GetItem(‘theme’); console.log(«режим: » режим);

2. Вам нужно передать значение по умолчанию, если есть значение null.

3. значок не остается измененным на значение по умолчанию fa fa-moon-o при переходе на другую страницу или обновлении

4. Внутри ready() вам нужно установить тему из localStorage. Вам также нужно изменить значки здесь.

5. куда мне нужно добавить класс body? мне нужно добавить класс nightMode при нажатии night ..и снова нажать удалить класс nightMode…

Метки: