Меню
Что нового?

Как создать такое?

FanatPHP

Новичок
Здравствуйте! Помогите пожалуйста реализовать данную штуку на js с красивым кодом, не какие css. В общем, есть кнопка обычная, при клике на неё, меняется цвет на красный, через 7 сек меняется на жёлтый, через 3 сек меняется на зелёный, через 2 обратно в первое положение. С одним таймингом, не запускаю куча таймингов
 

Тугай

Новичок
не выдумывай используй css,
ты собрался на js из красного в желтый все промежуточные цвета вычислять ?
Красивого ничего не будет, нужно из точки rgb0 в точку rgb1 считать цвет с каким-то выбранным фреймрейтом.
разные тайминиги это просто интервалы 7/12, 3/12, 2/12, что примерно 60%, 25%, 15%.
Код: 
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes color-animation {
  0%  {background-color: red;}
  60%  {background-color: yellow;}
  85%  {background-color: green;}
  100% {background-color: black;}
}

div {
  width: 100px;
  height: 100px;
  background-color: black;
}

.run-animation {
  animation-name: color-animation;
  animation-duration: 12s;
}
</style>
</head>
<body>
<div onclick="color_click(this)"></div>
<script>
function color_click(div)
{
    div.classList.remove("run-animation");
    void div.offsetWidth;
    div.classList.add("run-animation");
}
</script>
</body>
</html>
 
Последнее редактирование:
  • Like
Реакции: AmdY

FanatPHP

Новичок
Тугай написал(а):
не выдумывай используй css,
ты собрался на js из красного в желтый все промежуточные цвета вычислять ?
Красивого ничего не будет, нужно из точки rgb0 в точку rgb1 считать цвет с каким-то выбранным фреймрейтом.
разные тайминиги это просто интервалы 7/12, 3/12, 2/12, что примерно 60%, 25%, 15%.
Код: 
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes color-animation {
  0%  {background-color: red;}
  60%  {background-color: yellow;}
  85%  {background-color: green;}
  100% {background-color: black;}
}

div {
  width: 100px;
  height: 100px;
  background-color: black;
}

.run-animation {
  animation-name: color-animation;
  animation-duration: 12s;
}
</style>
</head>
<body>
<div onclick="color_click(this)"></div>
<script>
function color_click(div)
{
    div.classList.remove("run-animation");
    void div.offsetWidth;
    div.classList.add("run-animation");
}
</script>
</body>
</html>
Нажмите для раскрытия...
без css, я написал же ))
 

Тугай

Новичок
Ну или что значит с одним таймингом ? один setTimeout ? запомни текущее время дергай через setInterval каждую секунду обработчик, считай сколько секуд прошло, меняй цвет, когда больше 12с clearInterval :)
 
Последнее редактирование:
Войдите или зарегистрируйтесь для ответа.
Сверху