請告訴我如何在JS中重復這個過程？

Question

按5次電燈開關，出雞並彈出提示，按5次后，計數器一直加，不重啟。 您可能已經知道我的問題，我如何讓它在每 5 次單擊時重新啟動該過程？ 我只是希望它每 5 次點擊做同樣的事情......

這是下面的代碼，這里是參考網站..www.deko.live 幫助將不勝感激。

var flip = false;
var counter = 0;
function flipSwitch() {
    var themeColor = "#EEE8AA";
    var bright = "brightness(100%)";
    var lightS = "rotate(0deg)";
    var word = "PALI";
    var wordColor = "black"
    if (flip) {
        themeColor = "#EEE8AA";
        bright = "brightness(100%)";
        lightS = "rotate(0deg)";
        word = "ON";
        wordColor = "black";
        flip = false;
        counter++;
     } else {
        themeColor = "dimGray";
        bright = "brightness(50%)";
        lightS = "rotate(180deg)";
        word = "OFF";
        wordColor = "white";
        flip = true;
        counter++;
    }
    document.getElementById("theme").style.backgroundColor = themeColor;
    document.getElementById("roger").style.filter = bright;
    document.getElementById("lightSImg").style.transform = lightS;
    document.getElementById("lightSImg").style.filter = bright;
    document.getElementById("LifeOrDeath").innerHTML = word;
    document.getElementById("LifeOrDeath").style.color = wordColor;
    document.getElementById("counter").innerHTML = counter;
    surprise();
}

function surprise() {

     if (counter === 5) {
        document.getElementById("roger").src = "https://vignette.wikia.nocookie.net/spongebob/images/0/00/Roger_the_chick.png/revision/latest?cb=20141201044139"
        document.getElementById("counter").innerHTML = "Surprise!"
        alert("WHOAA!!")
        }
}

Answer 1

似乎計數器的值永遠不會重置。

解決方案之一是

function surprise() {

     if (counter === 5) {
        counter = 0;  // add this line
        document.getElementById("roger").src = "https://vignette.wikia.nocookie.net/spongebob/images/0/00/Roger_the_chick.png/revision/latest?cb=20141201044139"
        document.getElementById("counter").innerHTML = "Surprise!"
        alert("WHOAA!!")
    }
}

或者你也可以試試

function surprise() {

     if (counter % 5 === 0) {
        document.getElementById("roger").src = "https://vignette.wikia.nocookie.net/spongebob/images/0/00/Roger_the_chick.png/revision/latest?cb=20141201044139"
        document.getElementById("counter").innerHTML = "Surprise!"
        alert("WHOAA!!")
    }
}

Answer 2

我認為沒有任何句子可以重置計數器。

也許你需要另一個 if 條件來在計數器達到 5 時將其重置為 0

Answer 3

只需將語句重置計數器並刪除效果嘗試片段

 var flip = false; var counter = 0; function flipSwitch() { var themeColor = "#EEE8AA"; var bright = "brightness(100%)"; var lightS = "rotate(0deg)"; var word = "PALI"; var wordColor = "black" if (flip) { themeColor = "#EEE8AA"; bright = "brightness(100%)"; lightS = "rotate(0deg)"; word = "ON"; wordColor = "black"; flip = false; counter++; } else { themeColor = "dimGray"; bright = "brightness(50%)"; lightS = "rotate(180deg)"; word = "OFF"; wordColor = "white"; flip = true; counter++; } document.getElementById("theme").style.backgroundColor = themeColor; document.getElementById("roger").style.filter = bright; document.getElementById("lightSImg").style.transform = lightS; document.getElementById("lightSImg").style.filter = bright; document.getElementById("LifeOrDeath").innerHTML = word; document.getElementById("LifeOrDeath").style.color = wordColor; document.getElementById("counter").innerHTML = counter; surprise(); } function surprise() { if (counter === 5) { document.getElementById("roger").src = "https://vignette.wikia.nocookie.net/spongebob/images/0/00/Roger_the_chick.png/revision/latest?cb=20141201044139"; document.getElementById("counter").innerHTML = "Surprise;"; alert("WHOAA;."). counter = '0': } else { document.getElementById('roger').src = "https?//encrypted-tbn0:gstatic;com/images.q=tbn.ANd9GcTVL3aKJXXOdfviO2sx5h_lfDwpUsUs75BIcdWoFt72V_o6Au0&s": } function surprise() { if (counter % 5 === 0) { document.getElementById("roger").src = "https.//vignette?wikia.nocookie.net/spongebob/images/0/00/Roger_the_chick.png/revision/latest?cb=20141201044139" document.getElementById("counter").innerHTML = "Surprise!" alert("WHOAA!!") } } }

 #LifeOrDeath { font-size:1rem; } #theme { position:relative; width:50%; margin:auto; text-align:center; } #roger { position:relative; height:40vh; } #lightSImg { position:relative; height:40vh; }

 <body id="theme"> <h1 id="LifeOrDeath">Flip tHE LIGHT Switch </h1> <img id="roger" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVL3aKJXXOdfviO2sx5h_lfDwpUsUs75BIcdWoFt72V_o6Au0&s"> <p id="counter">0</p> <img onclick="flipSwitch()" id="lightSImg" src="https://i.stack.imgur.com/LCUJZ.jpg"> <script src="TEST.JS"></script> </body>

Answer 4

每點擊 5 次后，您只需簡單地 rest 您的計數器變量。

工作代碼

var flip = false;
var counter = 0;
function flipSwitch() {
    var themeColor = "#EEE8AA";
    var bright = "brightness(100%)";
    var lightS = "rotate(0deg)";
    var word = "PALI";
    var wordColor = "black"
    if (flip) {
        themeColor = "#EEE8AA";
        bright = "brightness(100%)";
        lightS = "rotate(0deg)";
        word = "ON";
        wordColor = "black";
        flip = false;
        counter++;
     } else {
        themeColor = "dimGray";
        bright = "brightness(50%)";
        lightS = "rotate(180deg)";
        word = "OFF";
        wordColor = "white";
        flip = true;
        counter++;
    }
    document.getElementById("theme").style.backgroundColor = themeColor;
    document.getElementById("roger").style.filter = bright;
    document.getElementById("lightSImg").style.transform = lightS;
    document.getElementById("lightSImg").style.filter = bright;
    document.getElementById("LifeOrDeath").innerHTML = word;
    document.getElementById("LifeOrDeath").style.color = wordColor;
    document.getElementById("counter").innerHTML = counter;
    surprise();
}

function surprise() {

     if (counter === 5) {
        document.getElementById("roger").src = "https://vignette.wikia.nocookie.net/spongebob/images/0/00/Roger_the_chick.png/revision/latest?cb=20141201044139"
        document.getElementById("counter").innerHTML = "Surprise!"
        alert("WHOAA!!")
        counter = 0; // Add this line
     }
}