如何一次掷一个骰子？答案

【问题标题】：How to roll one dice at a time?如何一次掷一个骰子？
【发布时间】：2017-02-21 22:23:05
【问题描述】：

这就是我目前所拥有的。我对javascript很陌生。如何让这些骰子在 div 内按顺序滚动？比如只有在显示第一个随机数后才显示下一个随机数。

<html>
<style>
.numdiv{
height: 400px;
width: 200px;
border:solid 1px green; 
float: left
}
</style>

<head>
<script>
function rollDice(){
var number1 = document.getElementById("number1");
var number2 = document.getElementById("number2");
var number3 = document.getElementById("number3");
var status = document.getElementById("status");
var d1 = Math.floor(Math.random() * 6) + 1;
var d2 = Math.floor(Math.random() * 6) + 1;
var d3 = Math.floor(Math.random() * 6) + 1;
var diceTotal = d1 + d2 + d3;

    number1.innerHTML = d1;
    number2.innerHTML = d2;
    number3.innerHTML = d3;
    status.innerHTML = "You rolled "+diceTotal+".";
    if(diceTotal == 15){
        status.innerHTML += "You Win!!";
    }
}
</script>
</head>
<body>
<table>
<tr>
<td>
<div class="numdiv" id="number1">

0</div>
<div class="numdiv"  id="number2">
0</div>
<div class="numdiv"  id="number3">
0</div>
</td>
</tr>
<tr>
<td><button onclick="rollDice()"/>Generate Number</button></td></tr>
<tr>
<td><span id="status">0</span></td></tr>
</table>

</body>


</html>

【问题讨论】：

设置innerHTML分配之间的延迟，类似于setTimeout
我换个说法，我只希望骰子在我再次点击生成数字后前进并显示下一个。
您想要延迟时间，还是等到再次按下按钮？
等到再次按下

标签： javascript dice

【解决方案1】：

您可以使用setTimeout() method 来延迟函数的执行，以便一次掷一个骰子：

function rollDice(){
  var status = document.getElementById("status");
  var nums = document.querySelectorAll(".numdiv");
  var diceTotal = 0;
  var current;
  
  for (current = 0; current < nums.length; current++) {
    nums[current].innerHTML = "?";
  }
  
  current = 0;
  status.innerHTML = "Rolling...";
  
  function rollNext() {
    currentRoll = Math.floor(Math.random() * 6) + 1;
    nums[current].innerHTML = currentRoll;
    diceTotal += currentRoll;
    current++;
    if (current < nums.length) {
      setTimeout(rollNext, 1000);
    } else {
      status.innerHTML = "You rolled " + diceTotal + ".";
      if(diceTotal == 15){
        status.innerHTML += "You Win!!";
      }    
    }
  }
  setTimeout(rollNext, 1000);
}

.numdiv { height: 30px; width: 30px; border:solid 1px green; float: left; margin: 10px }

<table>
<tr>
  <td>
    <div class="numdiv" id="number1"></div>
    <div class="numdiv"  id="number2"></div>
    <div class="numdiv"  id="number3"></div>
  </td>
</tr>
<tr>
  <td><button onclick="rollDice()"/>Generate Number</button></td></tr>
<tr>
  <td><span id="status">0</span></td>
</tr>
</table>

还请注意，我已经删除了您单独的 number1、number2 和 number3 变量，而是使用单个变量 num 来引用所有 .numDiv div 元素的列表。这样您就可以轻松更改要使用的骰子数量，而无需更改 JS（您只需添加或删除 .numDiv 元素）。

编辑：正如我在上面发布的那样，您澄清说您希望用户按下每个骰子的按钮，而不是延迟自动滚动所有三个。所以我猜，可能类似于以下内容，在函数外部声明的变量中保留一个计数器和总数：

  var statusSpan = document.getElementById("status");
  var nums = document.querySelectorAll(".numdiv");
  var diceTotal;
  var current = 0;

  function rollDice(){
    if (current === 0) { // reset display
      for (var i = 0; i < nums.length; i++)
        nums[i].innerHTML = "?";
      diceTotal = 0;
    }
    
    currentRoll = Math.floor(Math.random() * 6) + 1;
    nums[current].innerHTML = currentRoll;
    diceTotal += currentRoll;
    if (++current < nums.length) {
      statusSpan.innerHTML = "Current total: " + diceTotal + ".";
    } else {
      statusSpan.innerHTML = "You rolled " + diceTotal + ".";
      if(diceTotal == 15){
        statusSpan.innerHTML += "You Win!!";
      }
      current = 0;
    }
  }

.numdiv { height: 30px; width: 30px; border:solid 1px green; float: left; margin: 10px; text-align: center }

<table>
<tr>
  <td>
    <div class="numdiv" id="number1"></div>
    <div class="numdiv"  id="number2"></div>
    <div class="numdiv"  id="number3"></div>
  </td>
</tr>
<tr>
  <td><button onclick="rollDice()">Roll next die</button></td></tr>
<tr>
  <td><span id="status">Ready to roll?</span></td>
</tr>
</table>

【讨论】：

似乎 OP 想要一些不同的东西 :) 让我换种说法，我只希望骰子前进并在我再次单击生成数字后显示下一个。
@AndrewL。 - 啊。在我发布答案前大约三秒钟，他们发布了该澄清。也许我会编辑。
是的！ @Jlouk — var ndivs = document.getElementsByClassName('numdiv') 为您提供所有 numdiv div，var maxrolls = ndivs.length 告诉您有多少。然后，您可以多次掷骰子（或骰子），每次点击后一次，当您达到最大值时停止。
@Jlouk - 我已经更新了我的答案，每次点击滚动一次，如果用户在掷完所有骰子后继续点击，则会自动重新启动。

【解决方案2】：

创建一个计数器变量，从您的 rollDice 函数之外的 1 开始，每次单击该变量时，计数器都会增加 1。然后你需要用这个替换所有的数字变量：

var number = document.getElementById("number" + counter);

我想你知道从这里去哪里。如果您需要更多指导，请告诉我！

【讨论】：

正是我需要的。谢谢

【解决方案3】：

基于您现有的逻辑，如果您想在每次用户点击时显示 1，那么另一种方法....

    var totalIter = 0;//global var which is set to increments on each click
    var diceTotal = 0;

    function rollDice() {
        totalIter = totalIter + 1; //increment by 1
        //Existing logic from your script
        var ele = document.getElementById("number" + totalIter);
        var d1 = Math.floor(Math.random() * 6) + 1;
        var status = document.getElementById("status");
        diceTotal = diceTotal + d1;
        ele.innerHTML = d1;
        status.innerHTML = "You rolled " + diceTotal + ".";
        if (diceTotal == 15) {
            status.innerHTML += "You Win!!";
        }
    }

【讨论】：