JavaScript меняет фон и воспроизводит звук одной кнопкой - PullRequest
Новая
       27

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

0 голосов
/ 10 октября 2018

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

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 (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;

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

1 Ответ

0 голосов
/ 10 октября 2018 
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);
}
...