用html写一个简易的自动贩卖机
时间: 2023-10-01 14:04:50 浏览: 66
好的,下面是一个简易的自动贩卖机的 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>自动贩卖机</title>
</head>
<body>
<h1>自动贩卖机</h1>
<p>请选择您要购买的饮料:</p>
<select id="drink">
<option value="0">请选择</option>
<option value="1">可乐</option>
<option value="2">雪碧</option>
<option value="3">果汁</option>
</select>
<p>请选择您要购买的数量:</p>
<input type="number" id="quantity" value="1" min="1">
<br><br>
<button onclick="calculate()">确定购买</button>
<div id="result"></div>
<script>
function calculate() {
var drink = document.getElementById("drink").value;
var quantity = document.getElementById("quantity").value;
var price;
var drinkName;
switch (drink) {
case "1":
price = 3;
drinkName = "可乐";
break;
case "2":
price = 2.5;
drinkName = "雪碧";
break;
case "3":
price = 4;
drinkName = "果汁";
break;
default:
document.getElementById("result").innerHTML = "请选择饮料";
return;
}
var total = price * quantity;
document.getElementById("result").innerHTML = "您购买的是" + drinkName + ",数量为" + quantity + ",总价为" + total + "元";
}
</script>
</body>
</html>
```
这个自动贩卖机可以让用户选择饮料和数量,然后计算出总价并显示在页面上。用户可以通过选择不同的饮料和数量来得到不同的总价。注意,这只是一个简易的示例,实际的自动贩卖机需要更复杂的逻辑和功能。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.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)