Не работает код по смене цветов текста в HTML

118
28 января 2021, 02:10

Пытаюсь реализовать функцию, которая постепенно, с небольшим интервалом меняет цвет текста.

В ХТМЛ только айди "test" с текстом, а вот в JS:

var p = document.getElementById('text'); 
window.setInterval(changeColors, 500);  //cмена цвета на 15 каждые полсекунды 
 
var colors = [255, 0, 0] 
 
function changeColors(colors) { 
  if (colors[0] == 255 && colors[1] != 255 && colors[2] == 0) { 
    colors[1] += 15; 
    let colorsToString = colors.join(); 
    return p.style.color = "rgb(" + colorsToString + ")" 
  } else if (colors[0] != 0 && colors[1] == 255 && colors[2] == 0) { 
    colors[0] -= 15; 
    let colorsToString = colors.join(); 
    return p.style.color = "rgb(" + colorsToString + ")" 
  } else if (colors[0] == 0 && colors[1] == 255 && colors[2] != 255) { 
    colors[2] += 15; 
    let colorsToString = colors.join(); 
    return p.style.color = "rgb(" + colorsToString + ")" 
  } else if (colors[0] == 0 && colors[1] != 0 && colors[2] == 255) { 
    colors[1] -= 15; 
    let colorsToString = colors.join(); 
    return p.style.color = "rgb(" + colorsToString + ")" 
  } else if (colors[0] != 255 && colors[1] == 0 && colors[2] == 255) { 
    colors[0] += 15; 
    let colorsToString = colors.join(); 
    return p.style.color = "rgb(" + colorsToString + ")" 
  } else if (colors[0] == 255 && colors[1] == 0 && colors[2] != 0) { 
    colors[2] -= 15; 
    let colorsToString = colors.join(); 
    return p.style.color = "rgb(" + colorsToString + ")" 
  } 
}
<p id="text">Javascript</p>

Answer 1

Попробуйте вот так:

Цвет задавать удобно в шкале hsl, меняя только первый компонент по кругу 0-360

var i = 0, p = document.getElementById('text'); 
setInterval(e => p.style.color = `hsl(${++i%360},55%,55%)`, 50);
<span id="text" style="font-size:100px">example text<span>

Answer 2

Ошибка вашего кода в том, что вы определяете colors сначала как переменную, а потом как параметр функции. Естественно при вызове функции через setInterval никакой параметр туда не передается, и параметр принимает значение undefined, тем самым перекрывая значение объявленной переменной.

var p = document.getElementById('text'); 
window.setInterval(changeColors, 500);  //cмена цвета на 15 каждые полсекунды 
 
var colors = { r:255, g:0, b:0 }; 
 
function changeColors() { 
  var c = colors; 
   
  if (     c.r == 255 && c.g != 255 && c.b == 0)   c.g += 15;     
  else if (c.r != 0   && c.g == 255 && c.b == 0)   c.r -= 15; 
  else if (c.r == 0   && c.g == 255 && c.b != 255) c.b += 15; 
  else if (c.r == 0   && c.g != 0   && c.b == 255) c.g -= 15; 
  else if (c.r != 255 && c.g == 0   && c.b == 255) c.r += 15; 
  else if (c.r == 255 && c.g == 0   && c.b != 0)   c.b -= 15;     
     
  p.style.color = `rgb(${c.r}, ${c.g}, ${c.b})`; 
}
<p id="text">Javascript</p>

Answer 3

Для меня осталось под вопросом, для чего if-else, если вам заранее известны все нужные цвета) Поэтому предложу еще такой вариант:

var x = document.getElementById('text1'); 
var y = document.getElementById('text2'); 
 
Rainbowing(x); 
Rainbowing(y); 
 
var rainbow = [ 
  '255,0,0',   // Красный 
  '255,125,0', // Оранжевский 
  '220,220,0', // Желтый 
  '0,240,0',   // Зеленый 
  '0,240,240', // Голбуой 
  '0,0,240',   // Синий 
  '240,0,240'  // Филалетовский 
]; 
 
function Rainbowing(el){ 
  var index = 0; 
  setInterval(function(){ 
    el.style.color = 'rgb(' + rainbow[index] + ')'; 
    index = (index == rainbow.length - 1) ? 0 : index + 1; 
  }, 3000); 
}
.rainbow { transition: 3s; color: red;}
<p id="text1" class="rainbow">Javascript</p> 
<p id="text2" class="rainbow">Ацетилсалициловая кислота</p>

transition делает всю плавную магию))

READ ALSO
Перемещение div&#39;а с помощью CSS
javascript

Перемещение div'а с помощью CSS

Нужно сместить элемент на 50 пикселей, написал такой скрипт - не смещается

 151
Объясните, пожалуйста, про Array.prototype.filter.call()
javascript

Объясните, пожалуйста, про Array.prototype.filter.call()

Есть такой кусочек кода, который отстортировывает все div'ыМне непонятно:

 152
Сделать избранное для пользователя
javascript

Сделать избранное для пользователя

Всем доброго времени сутокДля сайта понадобилась функция "Добавить в избранное"

 202
Значение value у option переносить в input
javascript

Значение value у option переносить в input

Мне надо реализовать, чтобы при замене option изменялось значение value и у inputПрикладываю, как я пытался реализовать

 175