JavaScript меняет фон и воспроизводит звук одной кнопкой

1

Я создаю часы, вдохновленные ссылкой ниже, с добавленными функциями, такими как одиночная кнопка, будет воспроизводить музыку и менять BodyBGcolor в секунду.

https://codepen.io/codifiedconcepts/pen/bwgxRq

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

var partyTime = false;
var catMusic = new Audio("media/party.mp3");

function partyEvent() {
// partyTime and catMusic are defined outside
// otherwise they get re-defined without changing the old definition
 if (partyTime === false) {
  partyTime = true;
  catMusic.play();
  partyBtn.innerHTML = "PARTY OVER";
} else {
  partyTime = false;
  catMusic.pause();
  partyBtn.innerHTML = "PARTY TIME";
 }
}

var i = 0;
function changeBG() {
var color = ["red", "blue", "brown", "green"];
document.body.style.backgroundColor = color[i];
i = (i + 1) % color.length;

 if (partyTime === true) {
  var initBG = setInterval(changeBG, 1000);
} else {
  clearInterval(initBG);
}
}

У меня есть другая функция, которая меняет BGcolor 5 раз в день, на утро, полдень, вечер и т.д. В качестве оператора switch, здесь я показываю один случай.

switch (true) {
case hour <= 5:
  imgTxt.innerHTML = "GET SOME SLEEPZ BRO";
  catImg.style.background = "url('img/earlyMorning.jpg')";
  catImg.style.backgroundSize = "cover";
  document.body.style.backgroundColor= "#2d3037";
  clockBody.style.color = "#99ffcc";
  break;

пожалуйста, помогите этому noob, и извините за отступ, он становится все таким же после вставки здесь.

Теги:
audio
addeventlistener
events
setinterval

1 ответ

1
Лучший ответ
if (partyTime === true) {
    var initBG = setInterval(changeBG, 1000);
} else {
    clearInterval(initBG);
}

Здесь вы создаете локальный блок initBG для блока if. В блоке else initBG не определен, поэтому он не останавливает процесс interval.

Решение. Определите initBG вне функции partyEvent.

var initBG;
if (partyTime === true) {
    initBG = setInterval(changeBG, 1000);
} else {
    clearInterval(initBG);
}
  • 0
    Да, это решило проблему. Но initBG запускается при загрузке страницы, как мне сделать так, чтобы он работал только при запуске partyEvent () или когда partyTime == true?
  • 0
    Посмотрите на ответ. Я редактировал это.
Показать ещё 1 комментарий

Ещё вопросы

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