时间戳

首页 > 解决方案 > HTML5 按钮颜色

button - HTML5 按钮颜色

问题描述

嗨，我在寻求帮助解决屏幕上的点击框会变成 4 种不同颜色的问题时发现了这个 glorius 代码。这是我发现的完美代码。我想要的只是从黄色开始，到琥珀色的onlick，在第二次点击时变成红色，在第三次点击时变成白色

<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！任何帮助都值得赞赏

标签： buttoncolorsclicking

解决方案

您只需使用 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>

推荐阅读