Question

我需要实现Night / Day模式的功能，就像justanotherpanel网站一样，我没有任何数据库，但是我有管理面板，我只写html css和javascript

有没有一种方法可以使用户登录并单击按钮的网站模式通过添加课程而变为夜间模式，并且当他们注销并再次登录夜间模式时仍处于...？

参考站点使用了此代码

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() {

            });
        }
    });

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

有什么方法可以在静态html网站上实现“夜间和白天”模式？

1 个答案: