javascript为文本框赋随机数

当我们在页面上需要一个随机数时，需要使用JavaScript来为文本框赋值。这是一个非常简单的任务，但是这个小小的需求可能会让一些新手感到困惑。本文将向您介绍如何使用JavaScript为文本框赋值随机数。

首先让我们来看一个简单的示例：

<html>
<body>
<input type="text" id="myTextBox">
<button onclick="generateRandomNumber()">生成随机数</button>
<script>
function generateRandomNumber() {
var randomNumber = Math.floor(Math.random() * 100) + 1;
document.getElementById("myTextBox").value = randomNumber;
}
</script>
</body>
</html>

在这个例子中，我们在页面上添加了一个单行文本框，以及一个按钮。当我们单击按钮时，调用了一个名为“generateRandomNumber()”的函数。这个函数将计算并生成一个介于1到100之间的随机数，并把这个随机数赋值给我们的文本框。

让我们来仔细看一下“generateRandomNumber()”函数。我们首先使用Math.random()函数来生成一个介于0和1之间的随机数。接着，我们使用Math.floor()函数来将其向下舍入到最接近的整数。这将生成一个0到99之间的随机整数（不包括99）。最后，我们添加1以使其落在1到100之间。

这是一个相对简单的例子，但这足以演示如何生成随机数并将其赋值给文本框。让我们用更多的例子来进一步探索这个问题。

假设我们有一个更大的表单，它包含多个文本框。我们可以使用类似于“myTextBox”这样的命名约定，并为每个文本框添加一个不同的后缀，例如“myTextBox1”、“myTextBox2”等等。然后，我们可以通过更改我们的generateRandomNumber()函数代码来通过ID重新定位每个文本框，并将随机数值分配给它：

<html>
<body>
<input type="text" id="myTextBox1">
<input type="text" id="myTextBox2">
<button onclick="generateRandomNumbers()">生成随机数</button>
<script>
function generateRandomNumbers() {
document.getElementById("myTextBox1").value = Math.floor(Math.random() * 100) + 1;
document.getElementById("myTextBox2").value = Math.floor(Math.random() * 1000) + 1;
}
</script>
</body>
</html>

还有一种情况是，我们需要为一组文本框生成一个随机数，而不是为每个文本框分别生成一个。例如，假设我们有一个包含三个文本框的表单，所有文本框都含有0和100之间的值。我们可以使用一个名为generateRandomNumbers()的函数来计算三个百分比数，并将它们分别为三个文本框赋值。

<html>
<body>
<input type="text" id="myTextBox1">
<label for="myTextBox1">%</label>
<input type="text" id="myTextBox2">
<label for="myTextBox2">%</label>
<input type="text" id="myTextBox3">
<label for="myTextBox3">%</label>
<button onclick="generateRandomNumbers()">生成随机数</button>
<script>
function generateRandomNumbers() {
var randomPercentage1 = Math.floor(Math.random() * 100);
var randomPercentage2 = Math.floor(Math.random() * 100);
var randomPercentage3 = Math.floor(Math.random() * 100);
document.getElementById("myTextBox1").value = randomPercentage1;
document.getElementById("myTextBox2").value = randomPercentage2;
document.getElementById("myTextBox3").value = randomPercentage3;
}
</script>
</body>
</html>

我们使用Math.random()函数来生成介于0和1之间的随机数，并使用Math.floor()函数将其向下舍入到最接近的整数。这样，我们就可以生成三个百分比数（介于0和99之间）。最后，我们只需将这三个值分配给三个文本框，即可完成随机数生成的任务。

总之，使用JavaScript为文本框赋随机数并不难。我们只需要使用一个基本的数学函数就能轻松完成。上面的例子可以帮助您理解如何通过代码动态地生成随机数，并将其分配给文本框。您可以根据自己的需要，使用类似的代码将随机数生成应用于您的项目中。