首页1.当点击“结算”按钮时，完成如下处理： 1) 单价必填，必须为数字，且不能为负数，如果填写不符合要求，给出具体的提示信息 2) 数量必填，必须为数字且是整数，不能为负数，如果填写不符合要求，给出具体的提示信息。根据输入信息计算总价格，保留2位小数，在界面上显示结果(设置2个及以上的样式)。参考效果图如下：

1.当点击“结算”按钮时，完成如下处理： 1) 单价必填，必须为数字，且不能为负数，如果填写不符合要求，给出具体的提示信息 2) 数量必填，必须为数字且是整数，不能为负数，如果填写不符合要求，给出具体的提示信息。根据输入信息计算总价格，保留2位小数，在界面上显示结果(设置2个及以上的样式)。参考效果图如下：

时间: 2024-03-29 18:38:48 浏览: 96

可以参考下面的代码实现： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>购物车计算器</title> <style> .error { color: red; font-weight: bold; } .success { color: green; font-weight: bold; } </style> </head> <body> <h3>购物车计算器</h3> <label>单价:</label><input type="text" id="price"><br/> <label>数量:</label><input type="text" id="quantity"><br/> <button onclick="calculate()">结算</button> <br/><br/> <label>应付金额:</label><span id="totalPrice"></span> <script> function calculate() { var priceInput = document.getElementById("price"); var quantityInput = document.getElementById("quantity"); var price = parseFloat(priceInput.value); var quantity = parseInt(quantityInput.value); // 判断单价是否合法 if (isNaN(price) || price <= 0) { priceInput.nextElementSibling.innerHTML = "单价必须为正数"; priceInput.nextElementSibling.classList.add("error"); return; } else { priceInput.nextElementSibling.innerHTML = ""; priceInput.nextElementSibling.classList.remove("error"); } // 判断数量是否合法 if (isNaN(quantity) || quantity <= 0 || quantity !== parseInt(quantity)) { quantityInput.nextElementSibling.innerHTML = "数量必须为正整数"; quantityInput.nextElementSibling.classList.add("error"); return; } else { quantityInput.nextElementSibling.innerHTML = ""; quantityInput.nextElementSibling.classList.remove("error"); } // 计算总价并显示 var totalPrice = price * quantity; document.getElementById("totalPrice").innerHTML = totalPrice.toFixed(2); document.getElementById("totalPrice").classList.add("success"); } </script> </body> </html>

阅读全文