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

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

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

你可以使用HTML和JavaScript结合来实现这个需求，下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>二十个随机数</title> <style> #result { margin-top: 20px; } </style> </head> <body> <h2>二十个随机数</h2> <p id="numbers"></p> <div id="stats"> <label for="max">最大值:</label> <span id="maxValue" class="hidden">0</span><br> <label for="min">最小值:</label> <span id="minValue" class="hidden">Infinity</span> </div> <script> // 生成20个随机数 function generateRandomNumbers() { const numbers = []; for (let i = 0; i < 20; i++) { numbers.push(Math.floor(Math.random() * 100)); // 生成0到99之间的整数 } displayNumbers(numbers); updateMinMax(numbers); } // 显示随机数列表 function displayNumbers(numbers) { let numList = '<ul>'; for (const number of numbers) { numList += `<li>${number}</li>`; } numList += '</ul>'; document.getElementById('numbers').innerHTML = numList; } // 更新最大值和最小值 function updateMinMax(numbers) { const maxValue = Math.max(...numbers); const minValue = Math.min(...numbers); document.getElementById('maxValue').textContent = maxValue; document.getElementById('minValue').textContent = minValue; if (maxValue === minValue) { document.querySelector('.hidden').classList.remove('hidden'); } else { document.querySelector('.hidden').classList.add('hidden'); } } // 初始化并生成随机数 generateRandomNumbers(); </script> </body> </html> ``` 在这个例子中，我们创建了一个页面，包含20个随机数列表和一个显示最大值和最小值的部分。每次页面加载时，会生成新的随机数，并更新相应的统计信息。

阅读全文