首页html里编写函数实现输入五个数的求平均值

html里编写函数实现输入五个数的求平均值

时间: 2024-10-10 17:14:18 浏览: 31

在HTML中，本身并不支持直接编写JavaScript函数，因为HTML主要用于标记网页内容结构。但你可以结合HTML和JavaScript来创建动态交互功能。以下是一个简单的例子，展示了如何在HTML中嵌入JavaScript代码，用于获取用户输入的五个数字并计算它们的平均值： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>求平均值</title> </head> <body> <h2>请输入5个数字：</h2> <input type="number" id="num1" placeholder="第一个数字"> <br> <input type="number" id="num2" placeholder="第二个数字"> <br> <input type="number" id="num3" placeholder="第三个数字"> <br> <input type="number" id="num4" placeholder="第四个数字"> <br> <input type="number" id="num5" placeholder="第五个数字"> <br> <button onclick="calculateAverage()">计算平均值</button> <p id="result"></p> <script> function calculateAverage() { const numbers = [document.getElementById('num1').value, document.getElementById('num2').value, document.getElementById('num3').value, document.getElementById('num4').value, document.getElementById('num5').value]; // 验证所有输入都是数字 if (numbers.every(isNumeric)) { const sum = numbers.reduce((acc, curr) => acc + curr, 0); const average = sum / numbers.length; document.getElementById('result').innerText = `平均值是: ${average}`; } else { document.getElementById('result').innerText = '请输入有效的数字'; } } // 判断是否为数字 function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n); } </script> </body> </html> ``` 在这个示例中，用户可以逐个输入数字，点击按钮后会调用`calculateAverage`函数计算并显示平均值。如果输入非数字，会提示用户。

阅读全文