用数组来保存值的投币游戏

Question

我只是在学习 Java 脚本的基础知识，但知道 Java 很多，我知道我做错了，只是在寻找正确的方法来做到这一点。我试图在文本字段中输入一个数字，并生成文本字段编号指定的 1-2 之间的随机数。然后将这些数字（一串 1 和 2）存储在一个数组中，然后使用 for 循环遍历该数组以计算有多少正面或反面，并打印出来。

预期输出：//输入的数字是10。
正面数 = 7 反面数 = 3

<!DOCTYPE html>
<html>

<head>
    <title>Coin Tosser</title>
</head>

<body>
    <h1>COINTOSSER</h1>

    <div id = "NumOfTosses">
        <input type = "text" id ="num">
    </div>
    <button id = "click" type="button">Start Tossing</button>

    <script>

    var numT = document.getElementById('num').value 
    document.getElementById('click').onclick = toss;
     
    
    
    function toss(){
    
        var tossArray = [];
    for(var i = 0;i<numT;i++){
    var rng = Math.floor(Math.random() * 2);
    tossArray.push(rng);
    }   
    
    var heads = 0;
    var tails = 0;
    for(var j = 0;j<tossArray.length;j++){
            if(tossArray[j] == 0){
            heads++;
        }else{
            tails++;
        }
    }    
    
    alert("Number of heads = " + heads + " and number of tails = " + tails);
    }

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

Answer 1

我已经评论了我所做的更改以及原因。

关键点在于，由于您正在计算 2 个值，因此您可以将每个值的计数存储在数组的索引中，而不是每次出现 2 个选项之一时都用新值填充数组。

这可以让您切断计数循环，使您的程序更有效率，总是尝试在添加时计数，而不是在最后添加然后计数。

另外，每次调用方法都需要刷新rng值，所以我把它移到了函数的顶部。

早点给！

<!DOCTYPE html>
<html>

<head>
    <title>Coin Tosser</title>
    <style>
      
      /*Fun CSS added */
      @keyframes flip{
        50%{
          transform: rotate(181deg);
        }
        100%{
          transform: rotate(360deg);
        }
      }
      html{
        background-color:lightgrey;
      }
      h1{
        background-color:grey;
        border-radius:25px;
        border:1px solid black;
      }
      button{
        background-color:gold;
        border-radius:25px;
        padding:5%;
      }
      button:hover {
        animation-name:flip;
        animation-duration:1s;
      }
    </style>
</head>

<body>
    <h1>COINTOSSER</h1>

    <div id = "NumOfTosses">
        <input type = "text" id ="num">
    </div>
    <button id = "click" type="button">Start Tossing</button>

    <script>

    document.getElementById('click').onclick = toss;
     
    
    
    function toss(){
    
        var numT = document.getElementById('num').value // Move numT initalization to method so it is set each time the method is run 
        var tossArray = [0,0];// change array to just count each index.
//E.G, if 1 happens '4' times, tossArray[1] will be 10.
        for(var i = 0;i<numT;i++){
          var rng = Math.floor(Math.random() * 2);
          tossArray[rng]=tossArray[rng]+1;
        }
      alert("Number of heads = " + tossArray[0] + " and number of tails = " + tossArray[1]);
    }

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

用数组来保存值的投币游戏

Coin Tossing game with Array to hold values

html

javascript

arrays

function

button