Fatal编程技术网
  • javascript/
  • Javascript 2个问题/1。全屏（jQuery）/2。背景更改和另存为cookie

Javascript 2个问题/1。全屏（jQuery）/2。背景更改和另存为cookie

javascript jquery cookies

Javascript 2个问题/1。全屏（jQuery）/2。背景更改和另存为cookie,javascript,jquery,cookies,background,fullscreen,Javascript,Jquery,Cookies,Background,Fullscreen,你好 我在网上搜索了一下，但找不到合适的代码 我想做： -点击按钮进入全屏模式。 -将背景颜色更改为深色，并将其另存为cookies 全屏模式： <html> <head> <title>Settings</title> </head> <body> <p>Change Theme</p> <form> <input t

你好

我在网上搜索了一下，但找不到合适的代码

我想做： -点击按钮进入全屏模式。 -将背景颜色更改为深色，并将其另存为cookies

全屏模式：

<html>
    <head>
      <title>Settings</title>
    </head>
    <body>
    <p>Change Theme</p>
    <form>
      <input type="radio" id="Light" title="White Theme">
      <br />
      <input type="radio" id="Dark" title="Dark theme">
      <br />
      <input type="submit" id="submit" value="Submit">
    </form>
    </body>
</html>
我是jQuery新手，找不到正确的代码。我找到了一个，但当我点击下一页的按钮时，它会关闭正常浏览器窗口的全屏模式，并更改我的网站背景颜色

创建代码：

<html>
    <head>
      <title>TEST</title>
    </head>
    <body>
    <a href="#" title="Go Fullscreen" onclick="toggleFullScreen()"><img src="fullscreen.png"></a>

    <script>
    function toggleFullScreen() {
      if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
      (!document.mozFullScreen && !document.webkitIsFullScreen)) {
      if (document.documentElement.requestFullScreen) {  
          document.documentElement.requestFullScreen();  
        } else if (document.documentElement.mozRequestFullScreen) {  
          document.documentElement.mozRequestFullScreen();  
        } else if (document.documentElement.webkitRequestFullScreen) {  
          document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
        }  
        } else {  
        if (document.cancelFullScreen) {  
        document.cancelFullScreen();  
        } else if (document.mozCancelFullScreen) {  
         document.mozCancelFullScreen();  
        } else if (document.webkitCancelFullScreen) {  
        document.webkitCancelFullScreen();  
        }  
      }   
    }
    </script>
    </body>
    </html>


试验
函数切换全屏（）{
if（（document.fullScreenElement&&document.fullScreenElement！==null）|
（！document.mozFullScreen&&！document.webkitIsFullScreen））{
if（document.documentElement.requestFullScreen）{
document.documentElement.requestFullScreen（）；
}else if（document.documentElement.mozRequestFullScreen）{
document.documentElement.mozRequestFullScreen（）；
}else if（document.documentElement.webkitRequestFullScreen）{
document.documentElement.webkitRequestFullScreen（元素.允许键盘输入）；
}  
}否则{
if（document.cancelFullScreen）{
document.cancelFullScreen（）；
}else if（document.mozCancelFullScreen）{
document.mozCancelFullScreen（）；
}else if（document.webkitcancelfulscreen）{
document.webkitcancelfulscreen（）；
}  
}   
}
更改背景并另存为cookie：

<html>
    <head>
      <title>Settings</title>
    </head>
    <body>
    <p>Change Theme</p>
    <form>
      <input type="radio" id="Light" title="White Theme">
      <br />
      <input type="radio" id="Dark" title="Dark theme">
      <br />
      <input type="submit" id="submit" value="Submit">
    </form>
    </body>
</html>
我想做的是，一个成员选择单选按钮的主题是白色还是黑色。白色主题的默认背景是白色的fff（白色）。当成员选择深色主题时，它会将背景颜色更改为#000000（黑色）。我是新来的，没有例子什么的，我不会写代码。有人能告诉我，我如何使用Cookies和Javascript/jQuery实现它吗

成员设置页面以更改它：

<html>
    <head>
      <title>Settings</title>
    </head>
    <body>
    <p>Change Theme</p>
    <form>
      <input type="radio" id="Light" title="White Theme">
      <br />
      <input type="radio" id="Dark" title="Dark theme">
      <br />
      <input type="submit" id="submit" value="Submit">
    </form>
    </body>
</html>


设置
改变主题
页面之前将主题更改为黑色：

<html>
<head>
  <title>Home Page</title>
</head>
<body>
<div style="background:#fff;height:600px;width:100%;">
  <!-- SOME CONTENT -->
</div>
</body>
</html>

<html>
<head>
  <title>Home Page</title>
</head>
<body>
<div style="background:#000000;height:600px;width:100%;">
  <!-- SOME CONTENT -->
</div>
</body>
</html>


主页
而页面之后的将主题更改为黑色：

<html>
<head>
  <title>Home Page</title>
</head>
<body>
<div style="background:#fff;height:600px;width:100%;">
  <!-- SOME CONTENT -->
</div>
</body>
</html>

<html>
<head>
  <title>Home Page</title>
</head>
<body>
<div style="background:#000000;height:600px;width:100%;">
  <!-- SOME CONTENT -->
</div>
</body>
</html>


主页
谢谢

您可以设置cookie值，如下所示：

document.cookie = "theme=black";

`changeCookieValue("black");`

$("body").addClass(getCookieValue("theme"));

.black > div {
    background: #000000;
}

.white > div {
    background: #fff;
}
或者，如果要保留其他设置，则：

function changeCookieValue(attribute, value) {
    var previousCookie = document.cookie.split(";");
    for (var i = 0; i < previousCookie.length; i++) {
        var key = previousCookie[i].substring(0,previousCookie[i].indexOf("="));
        if (key === attribute) {
            previousCookie[i] = attribute + "=" + value;
            document.cookie = previousCookie.join(";");
            return;
        }
    }
    document.cookie = document.cookie + ";" + attribute + "=" + value;
}
以下是您从cookie中读取数据的方式：

function getCookieValue(attribute) {
    var previousCookie = document.cookie.split(";");
    for (var i = 0; i < previousCookie.length; i++) {
        var key = previousCookie[i].substring(0,previousCookie[i].indexOf("="));
        if (key === attribute) {
            return presiousCookie[i].substring(previousCookie[i].indexOf("=") + 1);
        }
    }
    return "";
}
运行此部件时，请确保已加载实体。您可以这样设计主题：

document.cookie = "theme=black";

`changeCookieValue("black");`

$("body").addClass(getCookieValue("theme"));

.black > div {
    background: #000000;
}

.white > div {
    background: #fff;
}
或者，您可以使用，这更方便。关于全屏模式，没有理由重新发明轮子，因为有一个好的方法可以用于此目的

您可以使用
单选按钮的
onclick
属性确保
changeCookieValue
在单击时使用正确的参数运行


可选地，您可以考虑将值存储在数据库中，并在生成服务器时将所需的类添加到服务器上。
编辑：

您可以在加载的事件中添加类：


$(function() {
    $("body").addClass(getCookieValue("theme"));
});


注意，这将负责在页面加载时显示主题。无论何时调用主题的
changeCookieValue
，都需要显示它。在调用
函数之前
$（“body”）.removeClass（getCookieValue（“主题”）和执行
函数后
$（“body”）.addClass（getCookieValue（“主题”））（注意，主题已更改）。当然，您需要一个包装器：


function changeTheme(theme) {
    $("body").removeClass(getCookieValue("theme"));
    changeCookieValue("theme", theme);
    $("body").addClass(getCookieValue("theme"));
}



并在您的
单选按钮上触发此
changeTheme
。
请将帖子分成两个独立的问题。谢谢！你可能会说，我应该把代码“$（“body”）.addClass（getCookieValue（“theme”）；”放在哪里？我在“返回”之前尝试过；在函数getCookieValue（attribute）{@o'Bass，不必客气。我已经在我的答案中添加了进一步的细节。你不应该在getCookieValue中这样做，因为在加载页面或设置cookie值时，你不必调用getCookieValue。