Как сделать анимацию изменения цвета в секундах?

Question

[mijanj]

Допустим, у меня есть секундомер, как можно сделать так, чтобы с течением времени, изменялся цвет цифр?
Я реализовал это на каждую секунду, но есть способ сделать это проще(точнее на меньшее количество строк)?

Так выглядит JS:

(Возможно для опытных кодеров, этот скрипт - извращение, но я новичок :))

P.S.: Секундомер глобальный - при обновлении страницы может быть любое число, а не стартует с нуля

Comments

[edward_freedom]

colors = {
00: 'color1',
01: 'color2'
};

и в цикле проверяй

[edward_freedom]

цикл не обязателен в моем коде, сделай ключ массива секунды и обращайся к элементу массива по ключу секундам

Answer 1

[nowm]

Можно сделать так:

const colors = ['black', '#252240', /*далее все нужные цвета по этому же принципу*/];

// Это вместо всех блоков if (seconds.innerText == N)
seconds.style.color = colors[parseInt(seconds.innerText) || 0] || colors[0];

Answer 2

[Андрей Мартынкевич]

Хах, дежавю. Вчера ночью я думал над тем, а есть ли люди которые не используют массивы и циклы для написания кода. Вам нужно чтобы цвет менялся как rgb подцветка или вы сами указываете какие цвета должны меняться?
P.s Без обид, я понимаю все мы были новичками. Да и я сам не понимаю некоторых вещей что-то гуглю или спрашиваю

Comments

[mijanj]

Ноль обид! :)
Мне нужно что-то вроде плавной смены цвета. Например от черного(0 сек) до фиолетового(59 сек). Пробовал сделать с помощью CSS transition: 60s - работает но если только дождатся начала(0 сек), если же обновить страницу, и будет 1-59 сек - то останется начальный цвет(что понятно)

[Андрей Мартынкевич]

mijanj, а css keyframes пробовали?

[mijanj]

Андрей Мартынкевич, так там ведь нет привязки к значению секундомера. В любой момент, когда перезагружу страницу, будет начальное значение, даже если секунд будет 50

[edward_freedom]

Андрей Мартынкевич, а как ты предлагаешь привязать к определенной секунде цвет?

[Андрей Мартынкевич]

mijanj, А, понял Вас

[mijanj]

edward_freedom, ну так я делаю через js, только у меня код такой, что на каждую секунду назначен цвет. Я же спрашиваю, есть ли вариант упростить код

[Андрей Мартынкевич]

edward_freedom, Извиняюсь, не правильно понял вопрос автора

[Андрей Мартынкевич]

mijanj, Ну тогда вызывать функцию изменения цвета

let colors = ['red', 'green', 'blue'] // И тд.
function setColor(){
  let color = colors[parseInt(seconds.innerText)];
  seconds.style.color = color;
}

Ну или передавать секунду из таймера

function setColor(sec){
  let color = colors[sec] ;
  seconds.style.color = color;
}