在网页上随机显示10个两位数的js代码怎么写

要在网页上随机显示10个两位数，你可以使用JavaScript的Math对象来生成随机数，并结合HTML和DOM操作将结果显示到网页上。生成随机两位数、将结果附加到网页元素、实现代码的优化和复用性 是实现这个功能的关键点。

一、生成随机两位数

首先，我们需要创建一个函数来生成单个的两位随机数。JavaScript 的 Math.random() 函数可以生成一个0到1之间的随机小数，我们将其乘以90（两位数的最大值99减去最小值10的结果），然后加上10（两位数的最小值），得到一个两位的随机数。最后使用 Math.floor() 来向下取整，确保结果是一个整数。

function generateTwoDigitNumber() {

    return Math.floor(Math.random() * 90 + 10);
}

二、显示随机数到网页

生成随机数之后，我们需要创建一个函数将这些数显示到网页上。我们可以创建一个<div>元素来作为所有随机数的容器，并使用循环来生成10个随机两位数，将每个数值创建为一个<span>元素，然后附加到这个容器中。

function displayRandomNumbers() {

    var contAIner = document.createElement('div');
    for (var i = 0; i < 10; i++) {
        var number = generateTwoDigitNumber();
        var numberElement = document.createElement('span');
        numberElement.textContent = number + ' ';
        container.appendChild(numberElement);
    }
    document.body.appendChild(container);
}

三、调用函数和初始化

最后，我们只需要调用displayRandomNumbers函数即可在网页上显示这些随机数字。通常，你会希望在页面加载完成后执行这个操作，因此我们可以在一个 window.onload 事件中调用它。

window.onload = function() {

    displayRandomNumbers();
};

综上所述，完整的JavaScript代码将如下所示：

function generateTwoDigitNumber() {

    return Math.floor(Math.random() * 90 + 10);
}
function displayRandomNumbers() {
    var container = document.createElement('div');
    for (var i = 0; i < 10; i++) {
        var number = generateTwoDigitNumber();
        var numberElement = document.createElement('span');
        numberElement.textContent = number + ' ';
        container.appendChild(numberElement);
    }
    document.body.appendChild(container);
}
window.onload = function() {
    displayRandomNumbers();
};

这个简单的脚本将在网页上产生10个随机的两位数，并将其顺序显示。为了更好地样式化显示，可以进一步使用CSS。同时，这个基本的代码可以根据需要进行拓展和修改，例如增加用户交互，让用户可以通过按钮点击来生成新的随机数等。

相关问答FAQs：

1. 如何编写JavaScript代码以在网页上随机显示10个两位数？

• 首先，我们需要在网页上创建一个容器，例如使用div元素来显示随机数。
• 然后，我们需要使用JavaScript来生成随机数。可以使用Math.random()函数来生成一个0到1之间的随机数。
• 接下来，我们将生成的随机数乘以90，以得到一个0到90之间的数值。
• 由于我们需要生成两位数，所以我们需要将得到的数值加上10，以确保它在10到99之间。
• 最后，我们将生成的随机数添加到网页上的容器中，使用innerHTML属性来修改容器的内容。

2. 如何确保生成的两位数不重复？

• 若要确保生成的两位数不重复，我们可以创建一个数组来存储已生成的数值。
• 在生成随机数之前，我们首先需要检查数组中是否已存在该数值。如果存在，则需要生成一个新的随机数。
• 在向数组添加新的随机数之后，我们还可以使用Array.includes()方法来检查数组中是否存在重复项。
• 如果存在重复项，我们需要继续生成新的随机数，直到数组中不存在重复项为止。

3. 如何实现在点击按钮时随机显示两位数？

• 首先，我们需要在网页上创建一个按钮，并为其添加一个点击事件的监听器。
• 在事件监听器中，我们可以编写JavaScript代码来生成随机数并显示在网页上。
• 点击按钮时，代码会重新生成一个随机数，并将其显示在网页上。这样就实现了每次点击按钮都会随机显示一个两位数的功能。
• 可以使用document.getElementById()方法获取按钮元素，并使用addEventListener()方法添加点击事件的监听器。
• 在事件监听器中，我们可以使用上述提到的方法来生成随机数并将其显示在网页上。