Я создаю часы, вдохновленные ссылкой ниже, с добавленными функциями, такими как одиночная кнопка, будет воспроизводить музыку и менять 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, и извините за отступ, он становится все таким же после вставки здесь.
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);
}