首页写一个页面，输入一些数字，点击按钮，分别显示出这堆数字中的奇数、偶数，弹窗显示奇数和，偶数和

写一个页面，输入一些数字，点击按钮，分别显示出这堆数字中的奇数、偶数，弹窗显示奇数和，偶数和

时间: 2024-10-12 09:12:13 浏览: 31

要实现这个功能，你可以使用HTML创建基本的界面，JavaScript来处理用户输入和计算，以及CSS美化页面。以下是一个简单的示例： **HTML部分：** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Number Input</title> <style> /* 添加样式 */ input[type=number] { width: 100px; } button { margin-top: 10px; } .result { display: none; /* 初始隐藏结果 */ } </style> </head> <body> <h2>Enter numbers:</h2> <input type="number" id="numberInput" placeholder="Add a number"> <button onclick="calculate()">Calculate</button> <div class="results"> <p id="oddSum">Odd sum: <span class="hiddenResult oddSum"></span></p> <p id="evenSum">Even sum: <span class="hiddenResult evenSum"></span></p> </div> <script src="script.js"></script> </body> </html> ``` **JavaScript部分 (script.js):** ```javascript function calculate() { // 获取输入框的值 const numbers = document.getElementById('numberInput').value.split(',').map(Number); // 初始化结果 let oddSum = 0; let evenSum = 0; // 计算并显示结果 numbers.forEach(num => { if (num % 2 === 0) { evenSum += num; } else { oddSum += num; } }); document.querySelector('.oddSum span').innerText = oddSum; document.querySelector('.evenSum span').innerText = evenSum; // 显示结果 document.querySelectorAll('.hiddenResult').forEach(resultEl => { resultEl.classList.remove('hidden'); }); } ``` 在这个示例中，用户可以在`<input>`标签内输入数字，通过逗号分隔。点击按钮时，会调用`calculate()`函数，该函数获取输入的数字数组，然后遍历每个数字，如果它是偶数，则加到`evenSum`上，如果是奇数，则加到`oddSum`上。最后，它更新显示结果的部分。

阅读全文