Question

我遇到了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语句，我想更改控制多个drop的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>

有没有办法让所有其他if条件的nbDrop变量变为零，除了应该将它设置为120的那个？

Answer 1

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>

变量不会随if语句而改变

1 个答案: