上海设计网站建设,代做网站的公司,模板在线制作,便宜机票的网站建设下面是一个更全面的商品购物系统示例#xff0c;包含新增商品、商品的增加删除以及结算找零的功能。这个系统使用HTML和JavaScript实现。
1.功能说明#xff1a;
这个应用程序使用纯HTML和JavaScript实现。
包含一个商品列表和一个购物车区域。商品列表中有几个示例商品包含新增商品、商品的增加删除以及结算找零的功能。这个系统使用HTML和JavaScript实现。
1.功能说明
这个应用程序使用纯HTML和JavaScript实现。
包含一个商品列表和一个购物车区域。商品列表中有几个示例商品每个商品都有一个“加入购物车”按钮。点击“加入购物车”按钮后商品会被添加到购物车中并更新购物车显示。购物车中列出了所有已添加的商品并计算总价。每个购物车项都有一个“移除”按钮可以移除该商品。结算部分包含一个支付金额输入框和一个结算按钮。输入支付金额后点击结算按钮会计算找零并弹出提示框显示结算信息然后清空购物车。新增商品部分包含输入框用于输入新的商品名称和价格以及一个“新增商品”按钮。点击“新增商品”按钮后新的商品会被添加到商品列表中。
2.代码展示
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title商品购物系统/titlestylebody {font-family: Arial, sans-serif;background-color: #f4f4f9;margin: 0;padding: 20px;}.container {display: flex;justify-content: space-between;}.product-list, .cart {width: 45%;background-color: white;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}h1 {text-align: center;}.product-item, .cart-item {display: flex;justify-content: space-between;align-items: center;padding: 10px;border-bottom: 1px solid #eee;}.product-item:last-child, .cart-item:last-child {border-bottom: none;}.product-item button, .cart-item button {padding: 5px 10px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;}.product-item button:hover, .cart-item button:hover {background-color: #0056b3;}.total {margin-top: 20px;font-size: 18px;font-weight: bold;}.checkout-section {margin-top: 20px;}.checkout-section input[typenumber] {width: 100px;padding: 5px;border: 1px solid #ccc;border-radius: 5px;margin-right: 10px;}.checkout-section button {padding: 5px 10px;background-color: #28a745;color: white;border: none;border-radius: 5px;cursor: pointer;}.checkout-section button:hover {background-color: #218838;}.add-product-section {margin-top: 20px;}.add-product-section input[typetext], .add-product-section input[typenumber] {width: 150px;padding: 5px;border: 1px solid #ccc;border-radius: 5px;margin-right: 10px;}.add-product-section button {padding: 5px 10px;background-color: #ffc107;color: white;border: none;border-radius: 5px;cursor: pointer;}.add-product-section button:hover {background-color: #e0a800;}/style
/head
bodydiv classcontainerdiv classproduct-listh1商品列表/h1div idproduct-items/divdiv classadd-product-sectioninput typetext idnew-product-name placeholder商品名称 requiredinput typenumber idnew-product-price placeholder价格 min0 stepany requiredbutton onclickaddNewProduct()新增商品/button/div/divdiv classcarth1购物车/h1div idcart-items/divdiv classtotal idtotal-price总价: ¥0.00/divdiv classcheckout-sectioninput typenumber idpayment placeholder支付金额 min0 stepany requiredbutton onclickcheckout()结算/button/div/div/divscriptlet products [{ name: 苹果, price: 5 },{ name: 香蕉, price: 3 },{ name: 橙子, price: 4 }];let cart [];function updateProductList() {const productItemsDiv document.getElementById(product-items);productItemsDiv.innerHTML ;products.forEach((product, index) {const itemDiv document.createElement(div);itemDiv.className product-item;itemDiv.innerHTML span${product.name}/spanspan¥${product.price.toFixed(2)}/spanbutton οnclickaddToCart(${product.name}, ${product.price})加入购物车/button;productItemsDiv.appendChild(itemDiv);});}function addToCart(name, price) {const item { name, price };cart.push(item);updateCartDisplay();}function updateCartDisplay() {const cartItemsDiv document.getElementById(cart-items);cartItemsDiv.innerHTML ;let totalPrice 0;cart.forEach((item, index) {const itemDiv document.createElement(div);itemDiv.className cart-item;itemDiv.innerHTML span${item.name}/spanspan¥${item.price.toFixed(2)}/spanbutton οnclickremoveFromCart(${index})移除/button;cartItemsDiv.appendChild(itemDiv);totalPrice item.price;});document.getElementById(total-price).textContent 总价: ¥${totalPrice.toFixed(2)};}function removeFromCart(index) {cart.splice(index, 1);updateCartDisplay();}function checkout() {if (cart.length 0) {alert(购物车为空请先添加商品);return;}const payment parseFloat(document.getElementById(payment).value);const totalPrice cart.reduce((sum, item) sum item.price, 0);if (isNaN(payment) || payment totalPrice) {alert(支付金额不足请重新输入);return;}const change payment - totalPrice;alert(结算成功总价: ¥${totalPrice.toFixed(2)}\n支付金额: ¥${payment.toFixed(2)}\n找零: ¥${change.toFixed(2)});cart [];updateCartDisplay();document.getElementById(payment).value ;}function addNewProduct() {const newName document.getElementById(new-product-name).value.trim();const newPrice parseFloat(document.getElementById(new-product-price).value);if (!newName || isNaN(newPrice) || newPrice 0) {alert(请输入有效的商品名称和价格);return;}products.push({ name: newName, price: newPrice });updateProductList();document.getElementById(new-product-name).value ;document.getElementById(new-product-price).value ;alert(商品 ${newName} 已成功添加);}// 初始化商品列表updateProductList();/script
/body
/html
3.效果展示
