有人可以帮我解决黑暗模式吗？

Question

我想要一个基本的暗模式链接到按键。 我是 JavaScript 的初学者，我无法让它工作。 我想要这样，你按下一个键，Darkmode 通过 js-cookie 上的 Cookie 打开，然后我再次按下相同的键来关闭 Darkmode 并删除 cookie。 有谁能够帮助我？

有我的代码：

var elem = document.getElementById("folie");

window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key) {
let zahl = 1;
 if (key.keyCode == "70") {
    if (zahl == 1) {
      zahl++
      dark()
      Cookies.set("Darkmode", "An");
    }

  if (zahl == 2) {
    zahl--
    Cookies.remove("Darkmode")
  }

 }
 }

var DarkCookie = Cookies.get("Darkmode");
if (DarkCookie == 'An') {
  dark();
}

 function dark() {
   var element = document.body;
   element.classList.toggle("dark-mode");
 }

编辑：

好的，我知道了：

let CookieDarkMode = false;

function toggleDarkMode() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}

window.addEventListener("keydown", checkKeyPress);

function checkKeyPress(key) {
  if (key.keyCode === 70) { //"F" has been pressed
    CookieDarkMode = !CookieDarkMode;
    console.log("Cookie Dark mode: " + CookieDarkMode);
    toggleDarkMode();
    if (CookieDarkMode) {
      Cookies.set("Darkmode", "An");
    }else {
        Cookies.remove("Darkmode");
    }
  }
};
var DarkCookie = Cookies.get("Darkmode")
if (DarkCookie == 'An') {
  CookieDarkMode = true;
  toggleDarkMode();
}

Answer 1

您不必存储号码。 您可以使用布尔值获取先前的 cookie 值

 let CookieDarkMode = false; function toggleDarkMode() { var element = document.body; element.classList.toggle("dark-mode"); } window.addEventListener("keydown", checkKeyPress); function checkKeyPress(key) { if (key.keyCode === 70) { //"F" has been pressed CookieDarkMode = !CookieDarkMode; console.log("Cookie Dark mode: " + CookieDarkMode); toggleDarkMode(); } };

 body { background-color: ghostwhite; } .dark-mode { background-color: black; color: white; }

 <body> <p>Lorem Ipsum</p> </body>

Answer 2

你的问题出在你的checkKeyPress函数上，你总是检查zahl值，但它总是从1开始。

出于演示目的，您基本上是在这样做：

 function sum(){ let zahl = 1; zahl++ console.log(zahl) } // you will never see a 3, because you are creating `zhl` // in each call with a value of 1 sum(); sum(); sum(); sum();

因此，每次检查zahl变量时，它都会是1并且将始终输入if打开了darkmode 。

您的代码的解决方案是将zahl变量移到函数范围之外：

let zahl = 1; // outside the function scope
var elem = document.getElementById("folie");

window.addEventListener("keydown", checkKeyPress);

function checkKeyPress(key) {

  if (key.keyCode == "70") {
    if (zahl == 1) {
      zahl++
      dark()
      Cookies.set("Darkmode", "An");
    }else if (zahl == 2) {
      zahl--
      Cookies.remove("Darkmode")
      dark(); //you should call dark here as well to toggle to the other mode.
    }

  }
}

var DarkCookie = Cookies.get("Darkmode");
if (DarkCookie == 'An') {
  dark();
}

function dark() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}

注意：它看起来不是最好的实现，如果您使用布尔值表示模式的状态，或者如果您想要多种类型，则可以更容易阅读，您可以使用名称作为每种模式的键。

有人可以帮我解决黑暗模式吗？

问题描述

2 个解决方案

解决方案1
1 2020-02-05 14:30:25

解决方案2
0 2020-02-05 14:27:17

有人可以帮我解决黑暗模式吗？

问题描述

2 个解决方案

解决方案1 1 2020-02-05 14:30:25

解决方案2 0 2020-02-05 14:27:17

解决方案1
1 2020-02-05 14:30:25

解决方案2
0 2020-02-05 14:27:17