JavaScript实现购物车

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            width: 800px;
            margin: 0 auto;
        }
        .box,#box{
            width: 800px;
            border: 2px solid green;
            position: relative;
            top: 0;
            padding: 10px;
        }
        .check,p,span,.num,.add,.minus{
        /*    position: absolute;
            left: 0;
            top: 0;*/
            display: inline-block;
        }
        img{
            width: 82px;
            height: 82px;
            display: inline-block;
        }
        p{
            margin: 0 40px;
            color: #999999;
        }
        .price {
            vertical-align: middle;
            margin: 0 40px;
            font-size: 20px;
            color: red;
        }
        .num{
            width: 20px;
            height: 20px;
            border:1px solid;
            line-height: 20px;
            text-align: center;
            margin-left: 40px;
        }
        #selecteAll,#dele,#move,#product,#proNum,#textP,#totalPri{
            display: inline-block;
            color: #666666;
    

  • 6
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
实现购物的基本流程如下: 1. 创建一个空的购物数组,用于存放商品信息。 2. 在页面中展示商品列表,并为每个商品添加“加入购物”按钮。 3. 点击“加入购物”按钮时,获取当前商品的信息(如商品ID、名称、价格等),将其添加到购物数组中。 4. 在页面中展示购物列表,包括每个商品的信息以及数量、总价等信息。 5. 实现购物中商品数量、总价的实时更新,例如增加或减少商品数量时,购物列表应该实时更新。 6. 实现删除购物中的商品,同时更新购物列表和购物数组。 7. 实现结算功能,包括计算购物中所有商品的总价、应付款项等信息。 下面是一个简单的示例代码: HTML部分: ``` <!-- 商品列表 --> <div id="product-list"> <div class="product" data-id="1" data-name="商品1" data-price="10.00"> <h3>商品1</h3> <p>价格:10.00元</p> <button class="add-to-cart">加入购物</button> </div> <div class="product" data-id="2" data-name="商品2" data-price="20.00"> <h3>商品2</h3> <p>价格:20.00元</p> <button class="add-to-cart">加入购物</button> </div> ... </div> <!-- 购物列表 --> <div id="cart-list"> <h2>购物</h2> <table> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>总价</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <div id="cart-summary"> <p>总价:<span id="total-price">0.00</span>元</p> <button id="checkout">结算</button> </div> </div> ``` JS部分: ``` // 购物数组 var cart = []; // 获取商品列表和购物列表元素 var productList = document.getElementById('product-list'); var cartList = document.getElementById('cart-list'); // 添加商品到购物 function addToCart(id, name, price) { // 检查购物中是否已存在该商品 for (var i = 0; i < cart.length; i++) { if (cart[i].id === id) { cart[i].quantity++; return; } } // 如果购物中不存在该商品,则添加到购物数组中 cart.push({ id: id, name: name, price: price, quantity: 1 }); } // 渲染购物列表 function renderCart() { // 清空购物列表 cartList.querySelector('tbody').innerHTML = ''; // 遍历购物数组,生成购物列表 for (var i = 0; i < cart.length; i++) { var item = cart[i]; var tr = document.createElement('tr'); tr.innerHTML = ` <td>${item.name}</td> <td>${item.price.toFixed(2)}</td> <td>${item.quantity}</td> <td>${(item.price * item.quantity).toFixed(2)}</td> <td><button class="remove-from-cart" data-id="${item.id}">删除</button></td> `; cartList.querySelector('tbody').appendChild(tr); } // 更新总价 var totalPrice = cart.reduce((sum, item) => sum + item.price * item.quantity, 0); document.getElementById('total-price').textContent = totalPrice.toFixed(2); } // 商品列表添加点击事件 productList.addEventListener('click', function(event) { var target = event.target; if (target.classList.contains('add-to-cart')) { var product = target.closest('.product'); var id = product.dataset.id; var name = product.dataset.name; var price = parseFloat(product.dataset.price); addToCart(id, name, price); renderCart(); } }); // 购物列表添加点击事件 cartList.addEventListener('click', function(event) { var target = event.target; if (target.classList.contains('remove-from-cart')) { var id = target.dataset.id; cart = cart.filter(item => item.id !== id); renderCart(); } }); // 结算按钮添加点击事件 document.getElementById('checkout').addEventListener('click', function(event) { var totalPrice = cart.reduce((sum, item) => sum + item.price * item.quantity, 0); alert(`您需要支付${totalPrice.toFixed(2)}元`); }); ``` 以上代码仅为示例,实际项目中可能需要根据具体需求进行调整。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值