Question

我现在在大学，我正在学习Javascript。我有一个实验室，要求我在屏幕上显示三个完全随机的彩色按钮。现在，当这些按钮全部为绿色，全部为红色或全部为蓝色时，您可以获得多少积分。下面的代码是我到目前为止所做的，但是现在我想解释我的思考过程，也许可以从你们那里得到一些帮助，帮助我改进思考过程。

所以基本上下面我从3个按钮变量开始。事实证明，这对我来说完全没用。如果与他们一起发表声明，我认为我可以做得更复杂，但无法弄明白。所以我创建了一个名为randomButton的函数。然后我使用一个名为randomNumberOne的变量并将其设置为等于Math.ceil，并使其数字从1-3开始。然后我写了一个if语句，说明如果该变量中的数字设置为1，则显示红色按钮，如果是2绿色，如果是3蓝色。然后我调用该函数3次，因为我希望它显示3次。现在我要做的就是这样做，如果连续有3个蓝色，红色或绿色，它会显示类似＆＃34;你得到x10点＆＃34;或类似的东西。我只是不知道该怎么做。对不起，如果我输入的内容没有意义，我还在学习，我很想学习。谢谢你的时间。

＆＃13;

<!doctype html>
<html>
  <head>
  <script>
  var button1 = "<img src=red.jpg>"
  var button2 = "<img src=green.jpg>"
  var button3 = "<img src=blue.jpg>"

  function randomButton() {
    var randomNumberOne = Math.ceil(Math.random() * 3);
      if (randomNumberOne === 1) {
        document.write("<img src= red.jpg>");
      } else if (randomNumberOne === 2) {
        document.write("<img src= green.jpg>");
      } else if (randomNumberOne === 3) {
        document.write("<img src= blue.jpg>");
      }
  }

  </script>
  </head>
  <body>

  </body>
  <script>
  randomButton()
  randomButton()
  randomButton()
  </script>

</html>

＆＃13;

Answer 1

可能会尝试查看：随机数 Generate random number between two numbers in JavaScript

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

可变条件： http://www.w3schools.com/js/js_comparisons.asp

Answer 2

可能的演示可能类似于以下代码。注意： - 我没有测试过 - 有很大的改进空间（HTML中的内联javascript可以删除，例如，全局var奖金也可以删除）...如果需要，我会让你去做那些改进......

祝你好运！

  < !doctype html >

  < html >
  < head >

  < script >

  var bonus = 0;


  //display the 3 images and increment the bonus if the user win
  function play(){
   var first_img = randomButton();
   var second_img = randomButton();
   var third_img = randomButton();

    

   document.getElementById('images').innerHTML = first_img + second_img + third_img ;

   if(first_img==second_img && second_img==third_img){
   bonus++;
   document.getElementById('nb_bonus').innerHTML=bonus;
   }

 
   }

   //Returns a new random image tag 
  function randomButton() {
	var images = ["<img src=red.jpg>","<img src=green.jpg>","<img src=blue.jpg>"];
    //generate random between 0 and 2 index
	return images [Math.ceil(Math.random() * 2)]; 
  }



< /script>
</head >
< body >


<div id="images"></div>


Hi, you have <span id='nb_bonus'>0</span>. <br/>
Please click the button in order to align 3 similar images and win some bonus!

<input type="button" value="play" onclick="play()"/>
</body>
</html>

Answer 3

我会避免使用document.write（），因为它是很久以前使用过的古老方法。如今，它导致浏览器性能优化不佳。

除此之外，你应该有一个HTML文件，其中包含你的按钮，一个CSS颜色的CSS文件，以及一个javascript文件，其中包含用于生成随机数的业务逻辑，要显示的按钮等。一旦你创建HTML文件中的按钮（dom元素），您可以在javascript中检索它们并将它们分配给变量。

请参阅：Where is the JavaScript DOM API documented?以及Mozilla开发者网络上的其他链接。

这是一个简单的JSFiddle链接，可以帮助您入门。 http://jsfiddle.net/f4yLLa6c/1/

HTML：

<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>

使用Javascript：

function randomNumber() {
    return parseInt(Math.random()*10);
}


function randomizeButtons(button1, button2, button3) {        
    // generate random number
    var randomNum = randomNumber(1,3);

    if( randomNum == 0 ) {
        button1.className = "red";
    } else if( randomNum == 1 ) {
        button2.className = "blue";
    } else if (randomNum == 2) {
        button3.className = "green";   
    } else {
        button1.className = "blue";   
    }
}

function randomButton() {
    // get the buttons from the DOM
    var redButton = document.getElementById("button1");
    var greenButton = document.getElementById("button2");
    var blueButton = document.getElementById("button3");

    randomizeButtons(button1, button2, button3);
    randomizeButtons(button1, button2, button3);
    randomizeButtons(button1, button2, button3);
    randomizeButtons(button1, button2, button3);
    randomizeButtons(button1, button2, button3);

}

randomButton();

CSS：

button {
    color: white;
    font-size: 18px;
}
.red {
    background-color: red;
}

.green {
    background-color: #006633;
}

.blue {
    background-color: blue;
}

根据您的实验室，它并没有完全正常工作，但它足以让您前往，您可以添加更多逻辑来显示奖励积分，如果颜色相同，并确保按钮始终显示颜色。< / p>

创建三个单独的文件（.html，.css和.js）。确保使用脚本标记在HTML中包含js文件，并使用链接标记链接到样式表。祝你好运，如果你需要javascript，html和css的基本介绍，请尝试访问codecademy.com。

Answer 4

这里有很多很棒的输入，我在jsFiddle上给了这个概念：http://jsfiddle.net/bs8b4d29/

HTML：

<div id="wrapper">
    <div class="button" id="A"></div>
    <div class="button" id="B"></div>
    <div class="button" id="C"></div>
</div>

CSS：

.button {
    width: 50px;
    height: 20px;
    float: left;
    border: solid 2px;
    margin: 20px;
}

JS：

var buttonArray = ["red","blue","green"];

jackpot(randomizer(), randomizer(), randomizer());

function jackpot(btn1, btn2, btn3) {
    document.getElementById("A").style.backgroundColor = buttonArray[btn1];
    document.getElementById("B").style.backgroundColor = buttonArray[btn2];
    document.getElementById("C").style.backgroundColor = buttonArray[btn3];
}

function randomizer() {
    var color = Math.floor(Math.random()*3);
    return color;
}

在Javascript中将图像切换到不同的图像

4 个答案: