javascript - 变量不随 if 语句改变

我遇到了 Java Script 的问题。我有一段代码可以在 div 中产生雨水，我需要根据我的 if 语句关闭和打开雨水。

这是使雨起作用的 JS 代码。

var nbDrop = 120;

// function to generate a random number range.
function randRange( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}

// function to generate drops
function createRain() {

    for( i=1;i<nbDrop;i++) {
    var dropLeft = randRange(0,1280);
    var dropTop = randRange(-500,590);

    $('.rain').append('<div class="drop" id="drop'+i+'"></div>');
    $('#drop'+i).css('left',dropLeft);
    $('#drop'+i).css('top',dropTop);
    }

}
createRain();

因此，我还有一系列 if 语句，我想更改控制下降数量的 nbDrop 变量。我只希望一个条件导致下雨，而其他条件应将其设置为 0 值。

  function displayAnswer(answer) {           

var fortuneText = document.getElementById('answer');

    if (chosenAnswer == 0){
nbDrop = 0; 
}

else if (chosenAnswer == 1){
nbDrop = 0; 
}

else if (chosenAnswer == 2){
nbDrop = 0; 
}

else if (chosenAnswer == 3){
nbDrop = 0; 

}

else if (chosenAnswer == 4){

nbDrop = 0; 

}


else if (chosenAnswer == 5){


var nbDrop = 120;

// function to generate a random number range.
function randRange( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}

// function to generate drops
function createRain() {

    for( i=1;i<nbDrop;i++) {
    var dropLeft = randRange(0,1280);
    var dropTop = randRange(-500,590);

    $('.rain').append('<div class="drop" id="drop'+i+'"></div>');
    $('#drop'+i).css('left',dropLeft);
    $('#drop'+i).css('top',dropTop);
    }

}

createRain();
}
}

一个问题是它只在最后一个 if 语句为真时工作一次。但是当其他条件为真时，雨会继续下，因此由于某种原因该变量不会变为 0。它保持在 120。

即使我用来单击以更改 if 语句条件的按钮上有一个均匀的监听器:

  <button id="button1" onclick="displayAnswer();"></button>

有什么方法可以使 nbDrop 变量在所有其他 if 条件下变为零，但应将其设置为 120 的条件除外？

最佳答案

1:您应该删除条件 == 5 中的“var”，因为它已经声明。

else if (chosenAnswer == 5){
    // var nbDrop = 120;
    nbDrop = 120;

2: 当 nbDrop 为 0 时注释方法将不会运行，因为 i 从 1 开始并且 1 永远不会小于 0

function createRain() {
    // for( i=1;i<nbDrop;i++) {
    for( i=0;i<=nbDrop;i++) {      // need to be like this

3:您在错误的地方输入了。像这样更改它(请参阅代码中的“添加”和“删除”注释)或仅在满足条件 == 5 时调用“createRain”。如果您像下面那样缩进代码，您将更容易看到事情在哪个代码块中。

更新在“createRain”函数中添加了一个退出部分

function displayAnswer(answer) {           

    var fortuneText = document.getElementById('answer');

    if (chosenAnswer == 0){
        nbDrop = 0; 
    }

    else if (chosenAnswer == 1){
        nbDrop = 0; 
    }

    else if (chosenAnswer == 2){
        nbDrop = 0; 
    }

   else if (chosenAnswer == 3){
       nbDrop = 0;     
   }

   else if (chosenAnswer == 4){   
       nbDrop = 0;      
   }

   else if (chosenAnswer == 5){    
       nbDrop = 120;

   }    // added

   // function to generate a random number range.
   function randRange( minNum, maxNum) {
       return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
   }

   // function to generate drops
   function createRain() {

        if (nbDrop == 0) {
            // remove the drop element(s)
            $('.rain').children().remove();
            // exit the function
            return;
        }

       for( i=0;i<=nbDrop;i++) {
           var dropLeft = randRange(0,1280);
           var dropTop = randRange(-500,590);

           $('.rain').append('<div class="drop" id="drop'+i+'"></div>');
           $('#drop'+i).css('left',dropLeft);
           $('#drop'+i).css('top',dropTop);
       }    
   }

   createRain();

   //}    removed

}

并且，根据要求，这是完整的网页

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Magic 8 Ball</title>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
</head>
<body>
    <div id="topmask"></div>
    <div id="mainframe">
        <div id="mainframe2">
            <section class="rain"></section>
            <div id="rocketdear"></div><div id="smokedear"></div><div id="launchsmokedear"></div>
        </div>

        <div id="bubble"></div>
        <div id="bubbleHugecat"></div><div id="bubbleHugecatrays"></div>
        <div class="sign">
            <p id="question"></p>
            <p id="answer"></p>
        </div>
        <div id="eight-ball">
            <button id="button1" onclick="javascript:shake();"></button>
        </div>
    </div>
    <div id="bottommask"></div>

    <script>



        var nbDrop;

        function shake() {

            var answersArrayed = ["Yes. So nothing happens", "No. Enjoy your consequences", "Ok, but that's something different", "My answer won't help you, deal with it!", "Your questions don't matter anymore", "Your questions make it rain again"];

            // The question we asked
            var question = prompt("Ask you question...");
            var questionText = document.getElementById('question');
            questionText.innerHTML = question;

            // Number of possible answers
            var numberOfAnswers = answersArrayed.length;

            // Answers the 8 Ball can return


            // Answer returned by our 8 Ball
            var chosenAnswer = getAnswerNumber(numberOfAnswers);
            displayAnswer(chosenAnswer);




            // Returns a number based on the number of sides
            function getAnswerNumber(answerCount) {
                var number = getRandomInt(0, numberOfAnswers);
                return number;
            }

            // Returns a random integer between two numbers
            function getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min)) + min;
            }


            // Show our answer in the document
            function displayAnswer(answer) {



            }


            // Access the DOM element we want to to change
            var fortuneText = document.getElementById('answer');

            if (chosenAnswer == 0) {
                document.getElementById("bubble").className = "bubbleStill";
                fortuneText.innerHTML = answersArrayed[0];

                document.getElementById("smokedear").style.webkitAnimation = 'none';
                document.getElementById("launchsmokedear").style.webkitAnimation = 'none';
                document.getElementById("rocketdear").style.webkitAnimation = 'none';
                document.getElementById("bubble").style.webkitAnimation = 'none';

                document.getElementById("bubble").style.opacity = "0";
                document.getElementById("bubbleHugecat").style.opacity = "0";
                document.getElementById("bubbleHugecatrays").style.opacity = "0";
                document.getElementById("mainframe").style.backgroundImage = "url('desert23.svg')";
                document.getElementById("smokedear").className = "smokestill";
                document.getElementById("launchsmokedear").className = "launchsmokestill";
                document.getElementById("rocketdear").className = "rocketstill";

                nbDrop = 0;

            }

            else if (chosenAnswer == 1) {
                fortuneText.innerHTML = answersArrayed[1];

                document.getElementById("smokedear").style.webkitAnimation = 'none';
                document.getElementById("launchsmokedear").style.webkitAnimation = 'none';
                document.getElementById("rocketdear").style.webkitAnimation = 'none';

                document.getElementById("bubble").className = "bubbleExploading";
                document.getElementById("bubble").style.webkitAnimation = '';
                document.getElementById("bubble").style.opacity = "1";
                document.getElementById("bubbleHugecat").style.opacity = "0";
                document.getElementById("bubbleHugecatrays").style.opacity = "0";
                document.getElementById("mainframe").style.backgroundImage = "url('desert23.svg')";
                document.getElementById("smokedear").className = "smokestill";
                document.getElementById("launchsmokedear").className = "launchsmokestill";
                document.getElementById("rocketdear").className = "rocketstill";

                nbDrop = 0;
            }

            else if (chosenAnswer == 2) {
                fortuneText.innerHTML = answersArrayed[2];

                document.getElementById("smokedear").style.webkitAnimation = 'none';
                document.getElementById("launchsmokedear").style.webkitAnimation = 'none';
                document.getElementById("rocketdear").style.webkitAnimation = 'none';
                document.getElementById("bubble").style.webkitAnimation = 'none';
                document.getElementById("bubbleHugecatrays").style.opacity = "1";
                document.getElementById("bubbleHugecat").style.opacity = "1";
                document.getElementById("mainframe").style.backgroundImage = "url('desert23.svg')";
                document.getElementById("bubble").className = "bubbleStill";
                document.getElementById("bubble").style.opacity = "0";
                document.getElementById("smokedear").className = "smokestill";
                document.getElementById("launchsmokedear").className = "launchsmokestill";
                document.getElementById("rocketdear").className = "rocketstill";

                nbDrop = 0;
            }

            else if (chosenAnswer == 3) {


                document.getElementById("smokedear").style.webkitAnimation = 'none';
                document.getElementById("launchsmokedear").style.webkitAnimation = 'none';
                document.getElementById("rocketdear").style.webkitAnimation = 'none';
                document.getElementById("bubble").style.webkitAnimation = 'none';
                fortuneText.innerHTML = answersArrayed[3];
                document.getElementById("bubbleHugecat").style.opacity = "0";
                document.getElementById("bubbleHugecatrays").style.opacity = "0";
                document.getElementById("bubble").className = "bubbleStill";
                document.getElementById("bubble").style.opacity = "0";
                document.getElementById("mainframe").style.backgroundImage = "url('desert_night.svg')";
                document.getElementById("smokedear").className = "smokestill";
                document.getElementById("launchsmokedear").className = "launchsmokestill";
                document.getElementById("rocketdear").className = "rocketstill";

                nbDrop = 0;

            }

            else if (chosenAnswer == 4) {

                fortuneText.innerHTML = answersArrayed[4];
                document.getElementById("smokedear").style.opacity = "1";
                document.getElementById("launchsmokedear").style.opacity = "1";
                document.getElementById("rocketdear").style.opacity = "1";
                document.getElementById("smokedear").className = "smoke";
                document.getElementById("launchsmokedear").className = "launchsmoke";
                document.getElementById("rocketdear").className = "rocket";
                document.getElementById("smokedear").style.webkitAnimation = '';
                document.getElementById("launchsmokedear").style.webkitAnimation = '';
                document.getElementById("rocketdear").style.webkitAnimation = '';
                document.getElementById("bubble").style.webkitAnimation = 'none';

                document.getElementById("mainframe").style.backgroundImage = "url('desert23.svg')";
                document.getElementById("bubbleHugecat").style.opacity = "0";
                document.getElementById("bubbleHugecatrays").style.opacity = "0";
                document.getElementById("bubble").className = "bubbleStill";
                document.getElementById("bubble").style.opacity = "0";

                nbDrop = 0;
            }


            else {

                fortuneText.innerHTML = answersArrayed[5];

                document.getElementById("smokedear").style.webkitAnimation = 'none';
                document.getElementById("launchsmokedear").style.webkitAnimation = 'none';
                document.getElementById("rocketdear").style.webkitAnimation = 'none';
                document.getElementById("bubble").style.webkitAnimation = 'none';
                document.getElementById("smokedear").className = "smokestill";
                document.getElementById("launchsmokedear").className = "launchsmokestill";
                document.getElementById("rocketdear").className = "rocketstill";



                document.getElementById("mainframe").style.backgroundImage = "url('desert_rain.svg')";
                document.getElementById("bubbleHugecat").style.opacity = "0";
                document.getElementById("bubbleHugecatrays").style.opacity = "0";
                document.getElementById("bubble").className = "bubbleStill";
                document.getElementById("bubble").style.opacity = "0";

                nbDrop = 120;

            }


            // function to generate a random number range.
            function randRange(minNum, maxNum) {
                return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
            }



            // function to generate drops
            function createRain() {

                if (nbDrop == 0) {
                    // remove the drop element(s)
                    $('.rain').children().remove();
                    // exit the function
                    return;
                }

                for (i = 0; i <= nbDrop; i++) {

                    var dropLeft = randRange(0, 1280);
                    var dropTop = randRange(-500, 590);

                    $('.rain').append('<div class="drop" id="drop' + i + '"></div>');
                    $('#drop' + i).css('left', dropLeft);
                    $('#drop' + i).css('top', dropTop);

                }

            }
            createRain();

        }

    </script>
</body>
</html>

关于javascript - 变量不随 if 语句改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32794263/

javascript - 变量不随 if 语句改变

上一篇：php - 服务器端之后的 Bootstrap Validator

下一篇：jquery - 如何平均增加两个DIV的高度？