Fatal编程技术网
  • javascript/
  • Javascript 如何一次掷一个骰子？

Javascript 如何一次掷一个骰子？

javascript

Javascript 如何一次掷一个骰子？,javascript,dice,Javascript,Dice,这就是我到目前为止的情况。我对javascript非常陌生。我如何使这些骰子在骰子内按顺序滚动？例如，仅在显示第一个随机数之后才显示下一个随机数 <html> <style> .numdiv{ height: 400px; width: 200px; border:solid 1px green; float: left } </style> <head> <script> function rollDice(){ var numb

这就是我到目前为止的情况。我对javascript非常陌生。我如何使这些骰子在骰子内按顺序滚动？例如，仅在显示第一个随机数之后才显示下一个随机数

<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>


努姆迪夫先生{
高度：400px；
宽度：200px；
边框：实心1px绿色；
浮动：左
}
函数rollDice（）{
var number1=document.getElementById（“number1”）；
var number2=document.getElementById（“number2”）；
var number3=document.getElementById（“number3”）；
var status=document.getElementById（“状态”）；
var d1=数学地板（数学随机（）*6）+1；
var d2=数学地板（数学随机（）*6）+1；
var d3=数学地板（数学随机（）*6）+1；
var diceTotal=d1+d2+d3；
number1.innerHTML=d1；
number2.innerHTML=d2；
number3.innerHTML=d3；
status.innerHTML=“您滚动了“+diceTotal+”；
如果（总=15）{
status.innerHTML+=“你赢了！！”；
}
}
0
0
0
生成编号
0
您可以使用来延迟函数的执行，以便一次掷一个骰子：

函数rollDice（）{
var status=document.getElementById（“状态”）；
var nums=document.querySelectorAll（“.numdiv”）；
var-diceTotal=0；
无功电流；
用于（电流=0；电流
.numdiv{height:30px；width:30px；border:solid 1px绿色；float:left；margin:10px}

生成编号
0
创建一个计数器变量，从rollDice函数外部的一个开始，每次单击该变量，然后将计数器增加一个。然后，您需要将所有数字变量替换为：

var number = document.getElementById("number" + counter);
我想你知道该怎么办了。如果你需要更多的指导，请告诉我

在现有逻辑的基础上，如果您想在用户每次单击时显示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!!";
        }
    }
在
innerHTML
赋值之间设置一个延迟，类似于
setTimeout
让我重新表述一下，我只希望骰子前进，并在再次单击“生成数字”后显示下一个骰子。是否要一个时间延迟，或者等待再次按下按钮？等待再次按下按钮，就像OP想要一些不同的东西：）让我换一句话，我只想在再次单击“生成数字”后骰子前进并显示下一个。@AndrewL.-啊。他们在我发布答案前大约三秒钟发布了澄清。也许我会编辑。是的@Jlouk-
var ndivs=document.getElementsByClassName（'numdiv'）
提供所有numdiv，并且
var maxrolls=ndivs.length
告诉您有多少。然后，您可以多次掷骰子（或骰子），每次单击后一次，达到最大值时停止。@Jlouk-我已更新我的答案，每次单击一次，如果用户在掷完所有骰子后继续单击，则自动重新启动。这正是我需要的。谢谢