使用JavaScript获取特定范围内的随机2位数，其中第1位和第2位都受到约束

Question

我有一个有趣的数学难题要解决。

我正在编写一个测试，以验证不允许输入窗口中字段范围之外的值。在大多数情况下，这是非常容易的。

我使用的是这样一个函数：

function getRanInt(min, max)
{
let min = Math.ceil(min);
let max = Math.floor(max);
return Math.floor(Math.random() * (max - min) + min);
}

设置我要测试的"错误"值的范围。

然而，有一个字段在这种方法中起了作用。一个字段对每个数字都有约束。所以第一个数字只能在0-7之间，第二个数字只能是0-3之间。

我的第一个想法是简单地将两个数字连接在一起，我可以像这样单独约束：

let m1_1;
let m1_2;
m1_1 = getRanInt(8,9);
m1_2 = getRanInt(4,9);
m1 = m1_1.toString() + m1_2.toString();
m1 = Number(m1);

直到我思考了半秒钟，意识到这只会让我的错误值>83，但会忽略整个可能的错误值数组，如24、36、18等

我一直在绞尽脑汁，试图想出一个不太复杂的解决方案，但我一直一无所获。我想我会求助于你们这些优秀的braniacs，看看你们是否能帮我解开齿轮。

附加：如果有人感兴趣，该领域的工具提示明确表示：

2 Digits:
1st = 0 - 7
2nd = 0 - 3

Answer 1

要测试所有不正确的值，您可以将您提供的解决方案与第二组值组合起来，这些值可以通过以下方式使用您的函数访问：

let result;
if(Math.round(Math.random()))
{
let m1_1;
let m1_2;
m1_1 = getRanInt(8,9);
m1_2 = getRanInt(0,9);
let m1 = m1_1.toString() + m1_2.toString();
result = Number(m1);
}
else
{
let m2_1;
let m2_2;
m2_1 = getRanInt(0,7);
m2_2 = getRanInt(4,9);
let m2 = m2_1.toString() + m2_2.toString();
result = Number(m2);
}

Answer 2

我只是想知道为什么用户可以首先填写错误的值。

您可以通过限制用户可以输入的数字、使用数字输入或范围滑块来阻止这种情况的发生。

我将在下面向您展示它的外观，但您可以更进一步，根据pattern或min和max值覆盖用户所做的任何输入，或者检查输入是否有效。

滑块不需要额外的代码，所以这可能是首选方式。

function updateLabel(rangeId, rangeValue) {
let labelElement = document.getElementById(rangeId + "label");
if (labelElement) {
labelElement.innerHTML = rangeValue;
}
}

label {
display: none;
font-size: 0.8rem;
}
input:invalid + label,
.range-container > label {
display: inline-block;
}
.range-container {
display: flex;
align-items: center;
}

<h4>Text Input</h4>
<div>
<input type="text" placeholder="0-7" maxlength="1" pattern="[0-7]{1}">
<label>A number between 0 and 7 is required.</label>
</div>
<div>
<input type="text" placeholder="0-3" maxlength="1" pattern="[0-7]{1}">
<label>A number between 0 and 3 is required.</label>
</div>
<hr/>
<h4>Number Input</h4>
<div>
<input type="number" placeholder="0-7" min="0" max="7">
<label>A number between 0 and 7 is required.</label>
</div>
<div>
<input type="number" placeholder="0-3" min="0" max="3">
<label>A number between 0 and 3 is required.</label>
</div>
<hr/>
<h4>Range Slider</h4>
<div class="range-container">
<input type="range" oninput="updateLabel(this.id, this.value)" id="first" min="0" max="7" value="0">
<label id="firstlabel">0</label>
</div>
<div class="range-container">
<input type="range" oninput="updateLabel(this.id, this.value)" id="second" min="0" max="3" value="0">
<label id="secondlabel">0</label>
</div>