Блог

Главная - Вопросы по программированию - Как автоматически генерировать красный цвет в каждом теге div блока 3*3 с помощью setInterval с помощью JavaScript? как подсчитывается цвет?

Как автоматически генерировать красный цвет в каждом теге div блока 3*3 с помощью setInterval с помощью JavaScript? как подсчитывается цвет?

#javascript #settimeout

Вопрос:

Это мой вывод, и я хочу, чтобы этот красный цвет автоматически генерировался setInterval

Это мой вывод, и я хочу, чтобы этот красный цвет автоматически генерировался setInterval

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

1. Добро пожаловать в SO! Не могли бы вы, пожалуйста, добавить некоторые пояснения о том, что вы пробовали и чего хотели бы достичь?

2. Добро пожаловать, приятель! Приятно слышать, что вы начали изучать веб-разработку. Но если вы хотите, чтобы мы помогли и оказали вам точную помощь, вам нужно быть более описательным и, возможно, привести несколько примеров. Удачи!

3. Пожалуйста, проясните вашу конкретную проблему или предоставьте дополнительные сведения, чтобы точно указать, что вам нужно. Поскольку это написано в настоящее время, трудно точно сказать, о чем вы просите.

Ответ №1:

Я не совсем понял ваш вопрос, но я все равно что-то сделал.

 const gridItem1 = document.querySelector('.grid-item-1');

setInterval(() => {
  gridItem1.style.backgroundColor = 'red';
}, 2000) 
 body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  grid-template-rows: repeat(3, 80px);
}

.grid-item {
  width: 80px;
  height: 80px;
  border: 1px solid red;
} 
 <div class="grid-container">
  <div class="grid-item grid-item-1"></div>
  <div class="grid-item grid-item-2"></div>
  <div class="grid-item grid-item-3"></div>
  <div class="grid-item grid-item-4"></div>
  <div class="grid-item grid-item-5"></div>
  <div class="grid-item grid-item-6"></div>
  <div class="grid-item grid-item-7"></div>
  <div class="grid-item grid-item-8"></div>
  <div class="grid-item grid-item-9"></div>
</div>

JavaScript просто берет первый элемент сетки ( grid-item-1 ) и меняет его background-color на красный.

Одна вещь, которую необходимо отметить, заключается в том, что здесь JavaScript добавляет inline стиль, что не всегда является хорошей идеей.

Еще одна вещь, которую вы можете сделать, — это создать класс, а затем добавить его через определенное время.

Вот пример:

 const gridItem1 = document.querySelector('.grid-item-1');

setInterval(() => {
  gridItem1.classList.add('red-div')
}, 2000) 
 body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
}

.grid-item {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

.red-div {
  background: red
} 
 <div class="grid-container">
  <div class="grid-item grid-item-1"></div>
  <div class="grid-item grid-item-2"></div>
  <div class="grid-item grid-item-3"></div>
  <div class="grid-item grid-item-4"></div>
  <div class="grid-item grid-item-5"></div>
  <div class="grid-item grid-item-6"></div>
  <div class="grid-item grid-item-7"></div>
  <div class="grid-item grid-item-8"></div>
  <div class="grid-item grid-item-9"></div>
</div>

Спасибо!

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

1. мне очень жаль.. за неправильный вопрос, который я загрузил.. ,На самом деле мой вопрос в том, что я хочу сгенерировать красный цвет, который генерируется случайным образом в каждых 9 блоках через 1 секунду.. когда я нажму кнопку «Пуск»

Метки: