首頁猿問如何反轉 JavaScript...

如何反轉 JavaScript 中的函數？

JavaScript

米琪卡哇伊 2023-10-14 16:41:39

我正在制作一個網站，我希望打開和關閉深色模式。我一直在尋找如何反轉函數，但由于我很擅長 JavaScript，所以無法設置函數來反轉它。所以我想在這里扭轉這個局面：<label class="switch"> <input id="input" onclick="changeColor(); changeColo(); changeCol(); changeCo(); changeC();" type="checkbox"> <span class="slider round"></span></label>var colors = ["#2D2D2D"]; var colorIndex = 0; function changeColor() { var col = document.getElementById("body"); if( colorIndex >= colors.length ) { colorIndex = 0; } col.style.backgroundColor = colors[colorIndex]; colorIndex++; } var colors = ["#332e2e"]; var colorIndex = 0; function changeColo() { var col = document.getElementById("article"); if( colorIndex >= colors.length ) { colorIndex = 0; } col.style.backgroundColor = colors[colorIndex]; colorIndex++; } var colors = ["#332e2e"]; var colorIndex = 0; function changeCol() { var col = document.getElementById("button"); if( colorIndex >= colors.length ) { colorIndex = 0; } col.style.backgroundColor = colors[colorIndex]; colorIndex++; } var colors = ["#332e2e"]; var colorIndex = 0; function changeCo() { var col = document.getElementById("div"); if( colorIndex >= colors.length ) { colorIndex = 0; } col.style.backgroundColor = colors[colorIndex]; colorIndex++; } var colors = ["#2D2D2D"]; var colorIndex = 0; function changeC() { var col = document.getElementById("form-container"); if( colorIndex >= colors.length ) { colorIndex = 0; } col.style.backgroundColor = colors[colorIndex]; colorIndex++; }這就是我需要扭轉的。我該怎么做？

查看完整描述

3 回答

catspeake

TA貢獻1111條經驗獲得超0個贊

我將為您提供一個帶有代碼的示例，您可以解決其余的問題。

var colors = ["#2D2D2D"]; // I don’t know why you have an array of

// color, but I could get this to be much simpler without using

// array, but I followed your example to make it simpler for you

var colorIndex = 0;

function changeColor() {

var col = document.getElementById("body");

if (colorIndex >= colors.length) {

colorIndex = 0;

}

if (colors[colorIndex] == col.getAttribute("currentColor")) {

col.style.backgroundColor = null; // Take the CSS color

col.setAttribute("currentColor",col.style.backgroundColor);

}

else {

col.style.backgroundColor = colors[colorIndex];

col.setAttribute("currentColor", colors[colorIndex]);

}

colorIndex++;

}

#body{

background-color: red;

}

</label>

</div>

反對回復 2023-10-14

30秒到達戰場

TA貢獻1828條經驗獲得超6個贊

試試這些

方法一：

為淺色和深色主題定義單獨的樣式。根據所需主題在 body 上設置類

JavaScript：

function toggleTheme() {

document.getElementsByTagName('body')[0].classList.toggle('light');

document.getElementsByTagName('body')[0].classList.toggle('dark');

}

CSS：

body.light {

background-color: white;

color: black;

}

body.light button {

background-color: blue;

color: black;

}

body.dark{

background-color: black;

color: white;

}

body.dark button {

background-color: grey;

color: black;

}

方法二：

定義變量屬性并在您的應用程序中使用這些屬性來設置樣式

JavaScript：

Same as above

CSS：

body.light {

--color: black;

--backgroundColor: white;

}

body.dark {

--color: white;

--backgroundColor: black;

}

button {

color: var(--color);

background-color: var(--backgroundColor);

}

反對回復 2023-10-14

守候你守候我

TA貢獻1802條經驗獲得超10個贊

您可以創建一個變量來處理狀態，設置布爾初始值并在每次單擊切換按鈕時更新其值，例如：

let actived = false;

function setState(){

if(actived == false){

changeColor1();

actived = true;

} else {

changeColor2();

actived = false;

}

反對回復 2023-10-14

3 回答
0 關注
155 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何反轉 JavaScript 中的函數？

如何反轉 JavaScript 中的函數？

3 回答

添加回答

如何反轉 JavaScript 中的函數？