html设计输入5本书的价格,点击总计按钮,显示出5本书的价格的和
时间: 2024-05-08 19:18:00 浏览: 9
可以使用JavaScript来实现这个功能,HTML代码如下:
```
<!DOCTYPE html>
<html>
<head>
<title>Book Prices Calculator</title>
</head>
<body>
<h1>Book Prices Calculator</h1>
<p>Please enter the prices of the 5 books:</p>
<input type="number" id="price1" />
<input type="number" id="price2" />
<input type="number" id="price3" />
<input type="number" id="price4" />
<input type="number" id="price5" />
<br />
<button onclick="calculateTotal()">Calculate Total</button>
<p>Total Price: $<span id="total"></span></p>
<script>
function calculateTotal() {
var price1 = Number(document.getElementById("price1").value);
var price2 = Number(document.getElementById("price2").value);
var price3 = Number(document.getElementById("price3").value);
var price4 = Number(document.getElementById("price4").value);
var price5 = Number(document.getElementById("price5").value);
var total = price1 + price2 + price3 + price4 + price5;
document.getElementById("total").innerHTML = total.toFixed(2);
}
</script>
</body>
</html>
```
这段代码使用了JavaScript的Number和toFixed方法来计算和显示总价格。如果你有任何疑问或需要帮助,请随时问我。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)