嗨，我在寻求帮助时发现了这个精彩的代码，因为我在屏幕上有一个点击框，它会变成4种不同的颜色。这是我找到的完美的代码。我只想从黄色开始，点击琥珀色，第二次点击变为红色，第三次点击变为白色
<html>
<body>
<style>
.H1toH5 input { display: none; }
.H1toH5 .seatButton { padding: 5px; border: 1px solid #ccc; background: yellow; }
.H1toH5 input:checked + .seatButton { background: red; }
</style>
<div class="H1toH5">
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
</body>
</html>
我对css很陌生，但它让我迷上了atm！任何帮助都被认为是
您只需使用JavaScript即可实现此功能。
<!DOCTYPE html>
<html>
<body>
<style>
.H1toH5 input { display: none; }
.H1toH5 .seatButton { padding: 5px; border: 1px solid #ccc; background: yellow; }
</style>
<div class="H1toH5">
<label>
<input type="checkbox" />
<span id = "myButton" class="seatButton">H1</span>
</label>
</body>
<script>
let button = document.getElementById("myButton");
let counter = 1;
button.addEventListener("click", function() {
if (counter == 1) {
button.style.background = "#FFBF00";
} else if (counter == 2) {
button.style.background = "red";
} else if (counter == 3) {
button.style.background = "white";
} else if (counter == 4) {
button.style.background = "yellow";
counter = 0;
}
counter++;
});
</script>
</html>更新部件
你可以用任何颜色来做这个。只需制作一个带有键/值对的字典，其中键是索引，值是颜色。
像这样的
let myDictionary = {
1: "red",
2: "yellow",
...
};
这是32种颜色的代码。
<!DOCTYPE html>
<html>
<body>
<style>
.H1toH5 input { display: none; }
.H1toH5 .seatButton { padding: 5px; border: 1px solid #ccc; color: #FFFFFF; background: #264653; }
</style>
<div class="H1toH5">
<label>
<input type="checkbox" />
<span id = "myButton" class="seatButton">1</span>
</label>
</body>
<script>
let button = document.getElementById("myButton");
let counter = 2;
let colors = {
1: "#264653",
2: "#2a9d8f",
3: "#e9c46a",
4: "#f4a261",
5: "#e76f51",
6: "#ffcdb2",
7: "#ffb4a2",
8: "#e5989b",
9: "#b5838d",
10: "#6d6875",
11: "#e63946",
12: "#f1faee",
13: "#a8dadc",
14: "#457b9d",
15: "#1d3557",
16: "#14213d",
17: "#fca311",
18: "#e5e5e5",
19: "#003049",
20: "#d62828",
21: "#fcbf49",
22: "#cdb4db",
23: "#ffc8dd",
24: "#ffafcc",
25: "#bde0fe",
26: "#a2d2ff",
27: "#ef476f",
28: "#ffd166",
29: "#06d6a0",
30: "#e09f3e",
31: "#540b0e",
32: "#4a4e69",
}
button.addEventListener("click", function() {
button.style.background = colors[counter]; // Updating the colour
button.textContent = counter; // Updating the text inside the span tag.
// When we reach the last index, or the colour, then reset the counter to zero to start from the beginning.
if (counter == 32) {
counter = 0;
}
counter++;
});
</script>
</html>