首页用html写一个简单的自动贩卖机

用html写一个简单的自动贩卖机

时间: 2023-09-29 22:11:17 浏览: 151

好的，这是一个简单的自动贩卖机的HTML代码，它可以卖出三种不同的饮料：可乐、雪碧和矿泉水。当用户选择一个饮料时，机器将显示所选饮料的价格，并且用户可以输入所需的数量。最后，机器将计算出总价并显示给用户。 ``` <!DOCTYPE html> <html> <head> <title>自动贩卖机</title> <meta charset="utf-8"> </head> <body> <h1>自动贩卖机</h1> <form> <label>请选择一种饮料:</label> <select id="drink"> <option value="cola">可乐</option> <option value="sprite">雪碧</option> <option value="water">矿泉水</option> </select> <br> <label>数量:</label> <input type="number" id="quantity" min="1" max="10" value="1"> <br> <button type="button" onclick="calculate()">购买</button> </form> <br> <div id="output"></div> <script> function calculate() { var drink = document.getElementById("drink").value; var quantity = document.getElementById("quantity").value; if (drink == "cola") { var price = 2.5; } else if (drink == "sprite") { var price = 2.5; } else if (drink == "water") { var price = 1.5; } var total = price * quantity; document.getElementById("output").innerHTML = "您购买了 " + quantity + " 瓶 " + drink + "，总价为 " + total.toFixed(2) + " 元。"; } </script> </body> </html> ``` 请注意，这只是一个简单的示例，它没有与任何服务器交互，因此您不能使用它来实际购买饮料。

阅读全文