Мигающий цвет фона в JavaScript
Я пытаюсь сделать мигающий цвет фона между красным и белым, написав 2 функции с интервалом в 3 миллисекунды, но, к сожалению, это не работает с моим классом набора элементов с именем «Плохой».
Может кто-нибудь помочь мне, что я делаю неправильно?
Код ниже:
function badBG(){
var colors = ['Red','White']
for(i=0; i<2; i++){
colorBG = colors[Math.floor(Math.random()*2)];
// console.info(colorBG)
}
return colorBG
}
function blinkBG(){
blink = badBG()
document.getElementsByClassName('Bad').style.backgroundColor = blink;
}
setInterval("blinkBG()",300);
Все прямолинейные функции и методы css.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Метод getElementsByClassName интерфейса Document возвращает подобный массиву объект всех дочерних элементов, которые имеют все заданные имена классов. Так что вы должны попробовать, как это
function blinkBG(){
blink = badBG()
var elems = document.getElementsByClassName('Bad'),
size = elems.length;
for (var i = 0; i < size; i++) {
var box = elems[i];
box.style.backgroundColor = blink;
}
}
Плохо закодирован по современным стандартам. Вместо того, чтобы возвращать объект коллекции HTML, для которого требуется цикл for для итерации, вы должны вернуть список узлов, который можно итерировать с помощью forEach. Тогда вы должны попытаться больше не использовать style в 2023 году, а применить изменения на уровне CSS, что можно легко сделать здесь с classList.toggle
@tacoshy о, спасибо, что сообщили мне, я далеко позади :(
Лучше используйте анимацию CSS:
.bad{
padding:30px;
animation: blink 300ms infinite;
}
@keyframes blink{
from {
background: white;
}
to{
background: red;
}
}<div class = "bad">I'm very bad</div>Большое спасибо ! Я должен знать все это раньше!
не разрешается запрашивать голоса или ответы для проверки. Особенно упоминание о том, что вы голосуете за вопрос и ожидаете ответа в ответ, является наказуемым нарушением.
@tacoshy отметил, что просто учит новичка, как работает stackoverflow. в противном случае это демотивирует каждого отвечающего, когда новый посетитель не принимает правильный ответ
@tacoshy я не делаю этого для постоянных пользователей
это также то, как работает SO, иногда не получая кредита за потраченное время. Как я уже сказал, это еще не оправдывает нарушение правил.
@tacoshy достаточно честно
@tacoshy, не могли бы вы помочь найти эту политику в справке SO? не повезло
Хотя я бы рекомендовал решать это исключительно на уровне CSS, как показал Александр Ненашев, для этого также есть чистое решение JavaScript.
Вы просто используете setInterval в сочетании с classList.toggle() для переключения класса в CSS. Означает, добавляя/удаляя его:
const BAD = document.querySelectorAll('.bad');
BAD.forEach(element => {
setInterval(function() {
element.classList.toggle('bg-red');
}, 300)
}).bad{
padding:30px;
}
.bg-red {
background-color: red;
}<div class = "bad">I'm very bad</div>
Это тоже работает!