Question

所以在这里有点卡住，我正在尝试创建一个随机数生成器，该生成器除了生成1-6之外还生成另外两个不同的数字，例如：Dice Roll is "1" "6"。我创建了两个不同的变量，它们从1-6生成，认为它们都可以显示，但不是吗？我在做什么错了？

我的代码是

function myFunction() {
    var p = document.getElementById("mydata"); // get the paragraph
    var result = Math.floor( Math.random() * 7);
    var result2 = Math.floor( Math.random() * 7);
    p.innerHTML = "Dice rolls are " + result +result2;
}

<!DOCTYPE html>
    <html lang="en">
    <head>
    
      <meta charset="utf-8">
      <title> Task 4 </title>
      <link href="style.css" type="text/css" rel="stylesheet">
      <script src="task4.js" type="text/javascript"></script>
    </head>
    <body>
      <!-- Create a paragraph with id mydata -->
      <div id="box">
      <p id="mydata">Roll Dice  </p>
    
      <!--Create a roll dice button-->
        <p> <button  onclick="myFunction();"> Roll Dice </button></p>  
    </div>
    </body>
</html>

我想要它，以便它像这样显示而不是总和 img

Answer 1

它确实有效，只是一个小问题，使用您当前的代码，您实际上可以得到0，这没有任何意义。这是您实际上需要完成的代码。另外，我对其进行了更改，以便可以将min和max与参数一起使用。

function rollDices(min, max) {
    var p = document.getElementById("mydata");
    var result1 = Math.floor(Math.random() * (max - min + 1)) + min;
    var result2 = Math.floor(Math.random() * (max - min + 1)) + min;
    p.innerHTML = "Dice rolls are \"" + result1 + "\" \"" + result2 + "\"";
}

<!DOCTYPE html>
    <html lang="en">
    <head>
    
      <meta charset="utf-8">
      <title> Task 4 </title>
      <link href="style.css" type="text/css" rel="stylesheet">
      <script src="task4.js" type="text/javascript"></script>
    </head>
    <body>
      <!-- Create a paragraph with id mydata -->
      <div id="box">
      <p id="mydata">Roll Dice  </p>
    
      <!--Create a roll dice button-->
        <p> <button  onclick="rollDices(1,6);"> Roll Dice </button></p>  
    </div>
    </body>
</html>

最终结果将是：掷骰子为“ X”，“ Y”。

Answer 2

它确实起作用。尝试打开devtools并禁用缓存，或将脚本标签切换到 <script src="task4.js?version=2" type="text/javascript"></script>

编辑：它不显示总和。它只是并排显示数字。您只需要添加带字符串连接的引号即可。例如

window.rollDice = _ => {
    const rnd = _ => ~~(Math.random() * 7)
    document.getElementById("mydata").innerHTML = `Dice rolls are "${rnd()}" "${rnd()}"`
}

*{font-family:futura,helvetica !important;text-transform:uppercase;}body{background:linear-gradient(135deg,#42e695 0,#3bb2b8 100%);background-repeat:no-repeat;height:100vh;width:100%;padding:2px}button{font-size: 1rem;transition:all 500ms ease-out;display:inline-flex; margin: 5px;background:#FAFAFA;padding:20px;border-radius:5px;box-shadow:0 20px 50px -10px rgba(0,0,0,.2)}p{font-size:2rem;color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.2)}button:focus{outline:none;transform:rotate(360deg);cursor:pointer;}button.active{filter:invert(100%)}.months{display:flex;flex-direction: column wrap;flex-wrap:wrap;justify-content:flex-start;align-items: flex-end;}p{color:white;}

<!DOCTYPE html>
    <html lang="en">
    <head>
    
      <meta charset="utf-8">
      <title> Task 4 </title>
      <link href="style.css" type="text/css" rel="stylesheet">
      <script src="task4.js" type="text/javascript"></script>
    </head>
    <body>
      <!-- Create a paragraph with id mydata -->
      <div id="box">
      <p id="mydata">Roll Dice</p>
    
      <!--Create a roll dice button-->
        <p> <button id="diceroller" onclick="rollDice();"> Roll Dice </button></p>  
    </div>
    </body>
</html>

Answer 3

“从1-6开始，认为两者都会显示，但不是吗？”

其他答案并不能真正解决您所说的问题。

所以，这似乎对我来说很好。

但是，如果您打开检查器（对于chrome，则为Ctrl + Shift + I），然后单击“控制台”选项卡。它可能会揭示出什么问题。

Answer 4

    String.format = function () {
        if (arguments.length == 0)
            return null;

        var str = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm');
            str = str.replace(re, arguments[i]);
        }
        return str;
    }

尝试此代码

String.format("Dice rolls are {0} and {1}", result, result2);

为避免滚动结果为0，可以使用： var result = Math.floor( Math.random() * 6) + 1

Answer 5

p.innerHTML =“掷骰子” +结果+结果2;

-> p.innerHTML =“骰子是” +结果+ result2;

数字生成器-两个单独的值

5 个答案: