首页根据输入的苹果和香蕉的数量，用JS代码实现点击计算按钮时，计算并显示总重量和总价钱

根据输入的苹果和香蕉的数量，用JS代码实现点击计算按钮时，计算并显示总重量和总价钱

时间: 2024-10-22 19:08:15 浏览: 22

在JavaScript中，你可以创建一个简单的HTML页面，配合一些JavaScript函数来实现这个功能。首先，假设每个苹果的价格是5元/kg，每个香蕉的价格是3元/kg。这是一个基本的例子： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水果重量和价格计算器</title> </head> <body> <input type="number" id="applesCount" placeholder="请输入苹果数量"> <input type="number" id="bananasCount" placeholder="请输入香蕉数量"> <button onclick="calculateWeightAndPrice()">计算</button> <p id="totalWeight">总重量:</p> <p id="totalPrice">总价格:</p> <script> function calculateWeightAndPrice() { const applesCount = parseInt(document.getElementById('applesCount').value); const bananasCount = parseInt(document.getElementById('bananasCount').value); // 苹果和香蕉的单价 const applePricePerKg = 5; const bananaPricePerKg = 3; // 计算总重量（千克） let totalWeight = applesCount + bananasCount; document.getElementById('totalWeight').innerText = `总重量: ${totalWeight}kg`; // 计算总价格（元） let totalPrice = (applesCount * applePricePerKg) + (bananasCount * bananaPricePerKg); document.getElementById('totalPrice').innerText = `总价格: ${totalPrice}元`; } </script> </body> </html> ``` 在这个示例中，用户可以输入苹果和香蕉的数量，点击“计算”按钮后，会动态地更新显示的总重量和总价格。

阅读全文