HTML點(diǎn)餐系統(tǒng)是一種基于HTML和JavaScript的網(wǎng)頁應(yīng)用程序，用于實(shí)現(xiàn)在線點(diǎn)餐功能。該應(yīng)用程序通過編寫相關(guān)的HTML和JavaScript代碼，實(shí)現(xiàn)了菜品展示、添加菜品、計(jì)算價(jià)格等功能，方便用戶進(jìn)行在線點(diǎn)餐。
以下是HTML點(diǎn)餐系統(tǒng)代碼詳解：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>點(diǎn)餐系統(tǒng)</title> <link rel="stylesheet" href="style.css"> // 引入樣式表 </head> <body> <h1>歡迎使用點(diǎn)餐系統(tǒng)</h1> <div id="menu"></div> // 顯示菜單 <div id="cart"></div> // 顯示已選擇的菜品 <br> <button onclick="calculatePrice()">提交訂單</button> // 提交訂單按鈕 <script src="menu.js"></script> // 引入JS代碼 </body> </html>以上為HTML頁面的基本結(jié)構(gòu)代碼，并引入了對(duì)應(yīng)的樣式表和JavaScript文件。
var menu = [ // 菜單數(shù)據(jù)
{ name: "漢堡", price: 10 },
{ name: "薯?xiàng)l", price: 5 },
{ name: "可樂", price: 3 }
];
function showMenu() { // 顯示菜單
var menuDiv = document.getElementById("menu");
menuDiv.innerHTML = "<h2>菜單</h2>";
menu.forEach(function(item, index) {
menuDiv.innerHTML +=
"<div class='menu-item' onclick='addToCart(" + index + ")'>" +
"<p>" + item.name + "</p>" +
"<p>價(jià)格：" + item.price + "元</p>" +
"</div>";
});
}
function addToCart(index) { // 加入購物車
var cartDiv = document.getElementById("cart");
cartDiv.innerHTML += "<p>" + menu[index].name + "</p>";
}
function calculatePrice() { // 計(jì)算價(jià)格
var cartDiv = document.getElementById("cart");
var totalPrice = 0;
var cartItems = cartDiv.getElementsByTagName("p");
for (var i = 0; i< cartItems.length; i++) {
menu.forEach(function(item, index) {
if (item.name === cartItems[i].innerHTML) {
totalPrice += item.price;
}
});
}
alert("總價(jià)：" + totalPrice + "元");
}以上為JavaScript代碼，實(shí)現(xiàn)了顯示菜單、加入購物車和計(jì)算價(jià)格等功能。其中，showMenu函數(shù)用于動(dòng)態(tài)生成菜單，addToCart函數(shù)用于將選中的菜品加入購物車，calculatePrice函數(shù)用于計(jì)算已選菜品的價(jià)格，并彈出總價(jià)提示框。綜上所述，HTML點(diǎn)餐系統(tǒng)代碼詳解主要包括HTML頁面結(jié)構(gòu)代碼和JavaScript功能代碼。通過這些代碼，我們可以實(shí)現(xiàn)簡(jiǎn)單但實(shí)用的在線點(diǎn)餐系統(tǒng)，為用戶提供便捷的點(diǎn)餐服務(wù)。