без изменения цвета через 10 секунд

1

У меня есть скрипка, в которой через каждую секунду я меняю цвет фона на другой цвет.

Мне интересно, какие изменения мне необходимо внести в код Javascript ниже, как присутствует в скрипке, чтобы не было изменения цвета через 10 секунд. Код JS, который я использую:

var i = 0;

function change() {
  var doc = document.getElementById("background");
  var color = ["black", "blue", "brown", "green", "red", "yellow", "white", "pink", "purple", "orange"];
  doc.style.backgroundColor = color[i];
  i = (i + 1) % color.length;
}
myVar = setInterval(change, 1000);
html,
body {
  border: 0;
  margin: 0;
  height: 100%;
  min-height: 100%;
}

.container {
  width: 100% !important;
}

#background {
  width: 100%;
  height: 100%;
}
<div id="background">
</div>
  • 0
    Поместите этот интервал в оператор if, если время <10 секунд, и увеличивайте интервал каждый раз
  • 3
    Следите за изменениями цвета с переменной, которая увеличивается в change . Затем очистите интервал с помощью clearInterval когда эта переменная change 10.
Теги:
background-color

3 ответа

2

очистить интервал через 10 секунд с тайм-аутом

Попробуй это:

var i = 0;

function change() {
  var doc = document.getElementById("background");
  var color = ["black", "blue", "brown", "green", "red", "yellow", "white", "pink", "purple", "orange"];
  doc.style.backgroundColor = color[i];
  i = (i + 1) % color.length;
}
myVar = setInterval(change, 1000);
setTimeout(() => {
  clearInterval(myVar);
}, 10000);
html,
body {
  border: 0;
  margin: 0;
  height: 100%;
  min-height: 100%;
}

.container {
  width: 100% !important;
}

#background {
  width: 100%;
  height: 100%;
}
<div id="background">
</div>
Поделиться
  • 3
    Смотри - намного лучше. И убедитесь, что вы создали минимальный воспроизводимый пример, поэтому скопируйте HTML и стиль в следующий раз
  • 0
    @mplungjan конечно, спасибо.
2

Что-то вроде этого?

var i = 0;
var doc = document.getElementById("background");
var color = ["black", "blue", "brown", "green", "red", "yellow", "white", "pink", "purple", "orange"];
function change() {
    if (i < 9) {
        doc.style.backgroundColor = color[i];
        i = (i + 1);
    } else {
        doc.style.backgroundColor = color[i];
        clearInterval(myVar);
   }
}

myVar = setInterval(change, 1000);
html,
body {
  border: 0;
  margin: 0;
  height: 100%;
  min-height: 100%;
}

.container {
  width: 100% !important;
}

#background {
  width: 100%;
  height: 100%;
}
<div id="background">
</div>
Поделиться
  • 2
    Я бы только добавил, что вы должны очистить интервал после достижения десяти итераций.
  • 0
    Хаха, он прав. Я никогда не замечал, что i никогда не увеличивают!
Показать ещё 2 комментария
1 
setTimeout(function () {
    clearInterval(myVar)
}, 10000)
Поделиться
  • 0
    Давай. Повторное размещение Амита с исправленной продолжительностью? Он мог бы сделать это тоже
  • 0
    Если вы ссылаетесь на представление, которое, как мне кажется, вы считаете, это была не единственная ошибка. Первоначальный ответ использовал setInterval (). В любом случае, это не конкурс, я просто пытаюсь помочь людям. Приветствия.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню