Блог

Главная - Вопросы по программированию - JavaScript setInterval для мерцания цвета контура не работает после первого изменения цвета

JavaScript setInterval для мерцания цвета контура не работает после первого изменения цвета

#javascript #css #setinterval #getelementbyid #var

#javascript #css #setinterval #getelementbyid #var

Вопрос:

Я пытаюсь менять цвет контура элемента H1 каждые 2 секунды. Поэтому я использовал этот код JavaScript… Но он меняется с желтого на оранжевый только один раз и остается оранжевым все время. Что я могу сделать, чтобы он мерцал между двумя цветами? Пожалуйста, ответьте в терминах JS, а не в библиотеке jQuery

Вот мой код JavaScript, я новичок в JS :

 var myVar = setInterval(function(){ colorFlicker() }, 2000);

function colorFlicker(){
    var y = document.getElementById("mainH1");
    y.style.outlineColor = y.style.outlineColor == "#ff944d" ? "#d9ff66": "#ff944d";
  }

Ответ №1:

Не проверяйте наличие цветов в javascript, возвращаемый цвет зависит от браузера и часто имеет формат rgb(200,33,33) или rgba(244,22,244,1) или даже шестнадцатеричный в старых браузерах, вместо этого используйте флаг

 var myVar = setInterval(colorFlicker, 500);

var flag = true;

function colorFlicker() {
    var y = document.getElementById("mainH1");
    y.style.outlineColor = flag ? "#d9ff66" : "#ff944d";
    flag = !flag;
} 
 #mainH1 {outline: 2px solid #ff944d;} 
 <h1 id="mainH1">TEST</h1>

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

1. можете ли вы объяснить словами, что делает флаг после того, как вы создаете переменную «y» в функции colorFlicker()?

2. Кто-нибудь может показать мне, как сделать то, что сделал adeneo с помощью оператора if, else, используя флаг? Это было действительно интересно, но, поскольку я новичок, я немного запутался в потоке управления.

3. Это то же самое, что и в коде, который у вас был, флаг запускается true и делает flag = !flag его обратным, поэтому true становится false , а в следующий раз false становится true и т. Д.

Ответ №2:

Изменения стиля должны обрабатываться с помощью CSS. Затем вы можете использовать JavaScript для безопасного переключения класса, который будет привязывать стиль CSS к вашим элементам:

 /* css */
#mainH1 { outline: /* some color */ }
#mainH1.alternateColor { outline: /* some other color */ }

// JS
var y = document.getElementById("mainH1");
function colorFlicker(){
  y.classList.toggle('alternateColor');
}

Ответ №3:

Используйте rgb() цвет по умолчанию, затем адаптируйте свое условие :

 var myVar = setInterval(colorFlicker, 1000);

function colorFlicker() {
  var y = document.getElementById("mainH1");

  y.style.outlineColor = y.style.outlineColor == "rgb(255, 148, 77)"?"#d9ff66":"rgb(255, 148, 77)";
} 
 h1 {
  outline-style: dotted;
  outline-color: rgb(255, 148, 77);
} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id='mainH1'>mainH1</h1>