Блог

Главная - Вопросы по программированию - Цвета кнопок HTML5

Цвета кнопок HTML5

#button #colors #clicking

#кнопка #Цвет #щелчок

Вопрос:

Привет, я нашел этот код glorius, когда искал помощь в решении моей проблемы с появлением на экране окна для щелчка, которое будет окрашиваться в 4 разных цвета. вот код, который я нашел, который является идеальным. Все, что я хочу, это начать с желтого, перейти к янтарному при нажатии, перейти к красному при 2-м щелчке и перейти к белому при 3-м щелчке

 <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, но это меня зацепило! Любая помощь приветствуется

Ответ №1:

Вы можете достичь этой функциональности просто с помощью 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>

Комментарии:

1. Ты святой. Большое вам спасибо!

2. Мне нужно сделать это 32 раза, пытаясь понять, как сделать их больше!

3. 32 раза? Какое количество цветов вы хотите переключить?

Метки: