首页请用html和JavaScript结合编辑 “twenty random numbers” 例子它显示的最大、最小和数字同时显示 20 个数字中的每一个

请用html和JavaScript结合编辑 “twenty random numbers” 例子它显示的最大、最小和数字同时显示 20 个数字中的每一个

时间: 2024-10-03 21:02:57 浏览: 25

当你想要使用HTML和JavaScript结合创建一个显示"二十个随机数"的例子，并且包括最大值、最小值以及每个随机数，你可以创建一个简单的页面结构，然后利用JavaScript生成随机数并更新页面内容。下面是一个示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>二十个随机数</title> <style> #result { margin-top: 15px; } </style> </head> <body> <h2>二十个随机数</h2> <p id="numbers"></p> <p id="stats">最大值：<span id="maxValue"></span>, 最小值：<span id="minValue"></span></p> <script> // 用于存储数字列表和计算最大最小值 let numbers = []; let maxValue = -Infinity; let minValue = Infinity; function generateRandomNumbers() { for (let i = 0; i < 20; i++) { const randomNumber = Math.floor(Math.random() * 100); // 生成0到99之间的整数 numbers.push(randomNumber); if (randomNumber > maxValue) { maxValue = randomNumber; } else if (randomNumber < minValue) { minValue = randomNumber; } // 更新页面显示 document.getElementById('numbers').innerHTML += `<li>${randomNumber}</li>`; } updateStats(); } function updateStats() { document.getElementById('maxValue').textContent = `最大值: ${maxValue}`; document.getElementById('minValue').textContent = `最小值: ${minValue}`; } // 初始加载时生成随机数 window.onload = function () { generateRandomNumbers(); }; </script> </body> </html> ``` 在这个示例中，当页面加载完成后，`generateRandomNumbers`函数会被调用，生成20个随机数并实时显示在`<ul>`元素下。同时，最大值和最小值会分别更新在`<span>`标签内。

阅读全文