写一个关于买蛋糕的网页代码
时间: 2024-04-29 13:27:09 浏览: 19
好的,以下是简单的 HTML 代码可以让用户选择购买蛋糕的种类和数量,然后计算总价并显示在页面上:
```
<!DOCTYPE html>
<html>
<head>
<title>购买蛋糕</title>
</head>
<body>
<h1>选择你喜欢的蛋糕:</h1>
<form>
<label for="cake-type">种类:</label>
<select name="cake-type" id="cake-type">
<option value="1">巧克力蛋糕</option>
<option value="2">草莓蛋糕</option>
<option value="3">慕斯蛋糕</option>
</select>
<br>
<label for="quantity">数量:</label>
<input type="number" name="quantity" id="quantity" min="1" value="1">
<br>
<button type="button" onclick="calculatePrice()">计算价格</button>
</form>
<div id="total-price"></div>
<script>
function calculatePrice() {
const cakeType = document.getElementById("cake-type").value;
const quantity = document.getElementById("quantity").value;
let price;
if (cakeType == 1) {
price = 50;
} else if (cakeType == 2) {
price = 48;
} else if (cakeType == 3) {
price = 55;
}
const totalPrice = price * quantity;
document.getElementById("total-price").innerHTML = `总价: $${totalPrice}`;
}
</script>
</body>
</html>
```
注意:这只是一个简单的样例代码,实际应用中还需要加入更多的验证和处理逻辑。
相关推荐
![](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)