【学习笔记46】JavaScript购物车的实现

最新推荐文章于 2024-05-28 18:30:26 发布
最新推荐文章于 2024-05-28 18:30:26 发布
阅读量7.4k 收藏 135
点赞数 15
分类专栏： JavaScript 文章标签： javascript 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58190023/article/details/128072583
版权

一、案例效果

1、将通过数据重构页面

  • 查询数据, 渲染页面
    在这里插入图片描述

2、全选

  1. 选中全选按钮后, 根据全选按钮的选中状态, 修改所有商品的选中状态
  2. 重新渲染视图

在这里插入图片描述

在这里插入图片描述

3、清空购物车

  1. 清空商品数据
  2. 重新渲染视图

在这里插入图片描述

在这里插入图片描述

4、结算

  1. 找到所有选中的商品
  2. 计算所有选中商品各自的总价
  3. 计算所有选中商品的总价之和

在这里插入图片描述

5、删除已选中

  1. 在原数组中, 找到选中的商品, 然后删除
  2. 重新渲染视图

在这里插入图片描述

在这里插入图片描述

6、商品数量调整

  1. 找到对应的商品, 修改收藏数量
  2. 重新渲染视图

在这里插入图片描述

在这里插入图片描述

7、选中商品

  1. 找到对应的商品, 修改选中状态
  2. 重新渲染视图

在这里插入图片描述

8、删除某一项

  1. 找到对应商品, 将删除
  2. 重新渲染视图

在这里插入图片描述

在这里插入图片描述

9、数据持久化 (浏览器关闭, 数据能保存)

  • 本地存储
    在这里插入图片描述

二、案例分析

1. 数组数据分析

  1. id: 数据的唯一值
  2. status: true代表该商品被选中, false则为没被选中
  3. pic: 图片地址
  4. name: 商品名
  5. price: 价格
  6. number: 商品收藏数量
  7. total: 库存

2. 数据驱动视图

  • 查: 查询数据, 渲染到页面
  • 增删改: 找到源数据, 然后对源数据做修改, 修改完成, 重新渲染页面

3. 逻辑思维

  1. 准备一个渲染函数
  2. 首次打开页面时 调用
  3. 在各种事件触发之后, 重新调用

三、html代码

		<div class="header">页面顶部</div>
		<!-- 动态生成数据 -->
		<div class="content"></div>
		<div class="footer">页面底部</div>
		<script src="./index.js"></script>

四、css代码

		* {
		    margin: 0;
		    padding: 0;
		}
		
		ul,ol,li {
		    list-style: none;
		}
		
		.header,.footer {
		    width: 1200px;
		    height: 100px;
		    background-color: skyblue;
		    color: #fff;
		    font-size: 50px;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    margin: 0 auto;
		}
		
		.footer {
		    height: 400px;
		}
		
		.content {
		    width: 1200px;
		    margin: 0 auto;
		    padding: 10px 0;
		}
		
		.content > .top,.content > .bottom {
		    height: 50px;
		    background-color: pink;
		    display: flex;
		    align-items: center;
		}
		
		.content > .bottom {
		    justify-content: space-between;
		    box-sizing: border-box;
		    padding: 0 10px;
		}
		
		.content > .bottom > .totalPrice > span {
		    font-size: 20px;
		    color: red;
		}
		
		.content > .bottom > .btns > button {
		    font-size: 18px;
		    padding: 5px 10px;
		    cursor: pointer;
		}
		
		.content > .top > input {
		    width: 30px;
		    height: 30px;
		    margin: 0 15px 0 50px;
		}
		
		.content > ul {
		    padding-top: 10px;
		}
		
		.content > ul > li {
		    width: 100%;
		    border: 1px solid #333;
		    box-sizing: border-box;
		    height: 100px;
		    margin-bottom: 10px;
		
		    display: flex;
		}
		
		.content > ul > li > div {
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    border-right: 1px solid #333;
		}
		
		.content > ul > li > div:last-child {
		    border: none;
		}
		
		.content > ul > li > .show,
		.content > ul > li > .status {
		    width: 100px;
		}
		
		.content > ul > li > .status > input {
		    width: 30px;
		    height: 30px;
		}
		
		.content > ul > li > .show > img {
		    width: 100%;
		    height: 100%;
		    display: block;
		}
		
		.content > ul > li > .price,
		.content > ul > li > .sub {
		    width: 200px;
		    color: red;
		    font-size: 20px;
		}
		
		.content > ul > li > .title {
		    width: 300px;
		    align-items: flex-start;
		    justify-content: flex-start;
		    box-sizing: border-box;
		    padding: 5px;
		}
		
		.content > ul > li > .number {
		    width: 230px;
		}
		
		.content > ul > li > .number > input {
		    width: 50px;
		    height: 30px;
		    text-align: center;
		    margin: 0 5px;
		    border: none;
		    outline: none;
		    font-size: 18px;
		}
		
		.content > ul > li > .number > button {
		    width: 30px;
		    height: 30px;
		    cursor: pointer;
		}
		
		.content > ul > li > .destroy {
		    flex: 1;
		}
		
		.content > ul > li > .destroy > button {
		    padding: 5px;
		    font-size: 18px;
		    cursor: pointer;
		}

五、js代码的实现

// 获取localStorage的数据时, 为了避免首次进入页面没有数据, 所以通过逻辑或给一个本地数据兜底
var cartList = JSON.parse(window.localStorage.getItem("cartList")) || [
    // 每一个对象就是一个购物车内容的数据
    {
        id: 111234,
        status: true,
        pic: "https://img1.baidu.com/it/u=2511310783,721605137&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=332",
        name: "我是一个手机, 不知道是啥",
        price: 100,
        number: 3,
        total: 16,
    },
    {
        id: 123456,
        status: false,
        pic: "https://img1.baidu.com/it/u=1537709578,2453227648&fm=253&fmt=auto&app=120&f=JPEG?w=809&h=500",
        name: "我是一个电脑, 不知道是啥",
        price: 98.72,
        number: 1,
        total: 7,
    },
    {
        id: 965874,
        status: true,
        pic: "https://img2.baidu.com/it/u=3561506717,735421650&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
        name: "我是一个手纸, 不知道是啥",
        price: 356.21,
        number: 2,
        total: 22,
    },
];


// 1. 获取标签对称
const oContent = document.querySelector('.content');

// 2. 封装函数 渲染页面
function myPage() {
    // 定义变量 存储数据
    let selectItem = 0;       //存储选中商品的数量
    let selectTotalNum = 0;   //存储选中商品的总数量
    let totalPrice = 0;       //存储选中商品的总价格

    // 找到选中的商品
    cartList.forEach(function (item) {
        if (item.status == true) {
            selectItem++;
            selectTotalNum += item.number;
            totalPrice += item.price * item.number;
        }
    })

    // 查找数据 渲染页面
    // 选中的商品数量 如果代表商品总量 代表所有商品被选中
    var str = `
        <div class="top">
			<input type="checkbox" class="checkAll" ${selectItem === cartList.length ? "checked" : ""}> 全选
		</div>
    `;

    cartList.forEach(function (item) {
        str += `
        <ul>
            <li>
                <div class="status">
                    <input type="checkbox" class="checkOther" data-id="${item.id}"  ${item.status ? "checked" : ""}>
                </div>
                <div class="show">
                    <img src="${item.pic}" alt="">
                </div>
                <div class="title">${item.name}</div>
                <div class="price">￥ ${item.price.toFixed(2)}</div>
                <div class="number">
                    <button class="reduce-btn"  data-id="${item.id}">-</button>
                    <input type="text" value="${item.number}">
                    <button class="increase-btn" data-id="${item.id}">+</button>
                </div>
                <div class="sub">￥ ${(item.number * item.price).toFixed(2)}</div>
                <div class="destroy">
                    <button class="del" data-id="${item.id}">删除</button>
                </div>
            </li>
        </ul>
    `;
    })

    str += `
		<div class="bottom">
        <div class="totalNum">总件数 : ${selectTotalNum}</div>
        <div class="btns">
            <button class="clearShopCart">清空购物车</button>
            <button class="payment" data-totalPrice="${totalPrice}"">去结算</button>
            <button class="delCheck">删除所有已选中</button>
        </div>
        <div class="totalPrice">
            总价格 : ￥ <span>${totalPrice.toFixed(2)}</span>
        </div>
    </div>
    `;
    oContent.innerHTML = str;

    // 将数据存储到localStorage中 便于下次进入可以获取上一次的数据
    window.localStorage.cartList = JSON.stringify(cartList);
    // window.localStorage.setItem("cartList", JSON.stringify(cartList));

}

// 调用函数 渲染页面（页面首次打开页面）
myPage()

// 3. 购物车的功能实现

// 利用事件冒泡 把事件委托给统一的父级
oContent.addEventListener('click', function (e) {
    // 全选效果
    if (e.target.className === 'checkAll') {

        cartList.forEach(function (item) {
            console.log(e.target.checked);
            item.status = e.target.checked;
        })

        // 渲染页面
        myPage()
    }


    // 清空购物车
    if (e.target.className === 'clearShopCart') {
        var warn = confirm('您确定要清空购物车吗')
        if (warn) {
            //购物车的数据为空
            cartList = [];
            // 渲染页面
            myPage()
        }
    }

    // 结算(将选择的商品总价计算打印到控制台)
    if (e.target.className === 'payment') {
        // console.log(e.target.dataset.totalprice);
        var price = e.target.dataset.totalprice;
        price = Math.round(price)
        confirm(`总价格为:${price}`)
    }

    // 删除所有已选中(没有选中时 禁止执行)
    if (e.target.className === 'delCheck') {
        var warn = confirm('您确定要删除当前选择的吗')
        if (!warn) return;
        // 过滤数组 只留下选中状态为false
        cartList = cartList.filter(function (item) {
            return !item.status
        })

        // 渲染页面
        myPage()
    }

    // 减少商品的数量
    if (e.target.className === 'reduce-btn') {
        // 减少商品数量 不能为0
        cartList.forEach(function (item) {
            // 通过商品的ID找到点击的是哪一个商品 累减操作
            if (item.id == e.target.dataset.id && item.number >= 2) item.number--;
        })

        // 渲染页面
        myPage();
    }

    // 增加商品的数量
    if (e.target.className === 'increase-btn') {
        cartList.forEach(function (item) {
            // 通过商品的ID找到点击的是哪一个商品 累加操作
            if (item.id == e.target.dataset.id && item.number < item.total) item.number++;
        })

        // 渲染页面
        myPage();
    }

    // 选中商品
    if (e.target.className === 'checkOther') {
        // 遍历数组找到要修改的商品
        cartList.forEach(function (item) {
            if (item.id == e.target.dataset.id) {
                // 修改商品的选中状态
                item.status = !item.status;
            }
        })
        // 渲染页面
        myPage()
    }

    // 删除某一项商品
    if (e.target.className === 'del') {
        var warn = confirm('您确定要删除当前的商品吗');
        if(!warn) return;
        // 遍历数组 找到需要删除的项 将其过滤
        cartList = cartList.filter(function(item){
            return item.id != e.target.dataset.id;
        })
        // 渲染页面
        myPage()
    }
})
0yizhiyang
关注
  • 15
    点赞
  • 踩
  • 135
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
JavaScript课程设计实训大作业：购物网站（含源代码+运行截图+实训报告）
06-05
基本功能： 网站显示商品分类和商品信息，提供搜索商品、浏览商品的功能； 用户能够注册后购物，查看订单、购物车和个人信息； 管理员有管理商品和用户的功能。 实现效果： 图片放大特效，浮动广告，文字滚动，商品秒杀活动，用户注册验证等。 1.1功能介绍 基本实现了网站显示商品分类和商品信息，提供搜索商品、浏览商品的功能；注册和登录，查看订单、购物车和个人信息注册验证；图片放大特效，浮动广告，弹窗广告，文字滚动，商品秒杀活动等。 1.2开发技术 综合运用HTML+CSS+JavaScript技术。 2.1 系统模块划分 网页的模块主要由主页、栏目页、商品详情页、轮播页、个人信息登录页面、秒杀页、购物车、注册和登录、咨询跳转到微信和QQ页、流动广告、弹窗广告等
JavaScript实现html购物车代码
南 墙
02-17 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
js实现购物车基本功能
最新发布
m0_71606684的博客
05-28 455
js实现购物车加、减、单选、全选、删除、价格总汇、数量总汇；
js实现购物车
m0_73481765的博客
06-30 3919
我们也添加了一个加入购物车的按钮，当这个按钮被点击时，我们会调用一个名为addToCart的函数。当用户点击“加入购物车”按钮时，商品将被添加到购物车中，并且购物车中商品的数量和总价将显示在HTML页面上。接下来，我们需要显示商品列表。我们将使用JavaScript循环遍历商品数组，并将每个商品的名称、价格和图片添加到HTML页面中。这个函数首先清空购物车HTML中的内容，然后遍历购物车数组，并将每个购物车物品的名称、价格和数量添加到HTML中。这个函数将从商品数组中取出商品，并将它添加到购物车数组中。
javascript购物车详解实现购物车完整功能(附效果图，完整代码)
热门推荐
笨鸟学飞的博客
08-11 4万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。
购物车——js小项目实例
u013430418的博客
09-08 4729
短短几周，js阶段的学习已然结束，结课作业就是实现一个购物车功能
js实现简单购物车
zhang_sir5768的博客
10-09 7900
介绍下如何使用js实现简单的购物车 功能如下：点击相应按钮，数量和价格会进行加减，点击相应的单选项，会将价钱显示到下面，全选按钮以及总价格。 代码如下： 小白，轻点喷。 ......
文章购物车功能实现（HTML学习笔记）对应代码
02-06
在这个HTML学习笔记中，我们将讨论以下几个关键知识点： 1. **HTML结构**： 在创建购物车功能时，首先需要设计一个清晰的HTML结构。这通常包括商品列表、添加到购物车按钮、购物车概览和结账区域。HTML元素如`<ul>...
狂神说各种学习视频配套笔记
05-30
JavaWeb部分则深入讲解了Servlet和JSP，如在"总结1-servlet+jsp 实现一个购物车.md"中，可能介绍了如何利用这两项技术构建动态网页和实现购物车功能。 2. **HTML、CSS与JavaScript**: 这些是前端开发的基础。HTML...
javascript学习笔记（七）利用javascript来创建和存储cookie
12-04
总结，JavaScript中的Cookie是实现用户状态持久化的重要工具，虽然有其局限性，但在许多场景下仍然是必要的，比如用户身份验证、个性化体验和页面统计等。理解如何创建、读取和管理Cookie对于前端开发者来说是必不可...
jQuery笔记第二天的购物车案例代码
03-01
在本篇jQuery笔记中，我们将深入探讨购物车案例的实现，这个案例主要涉及前端开发中的交互设计和数据管理。购物车是电商网站的核心功能之一，它涉及到商品的添加、删除、数量调整等操作，同时也需要实时更新总价。...
v-for过滤和排序，购物车页面效果，笔记本
03-15
在Vue中，可以使用组件化来分离购物车和商品列表的逻辑，通过`vuex`或父子组件通信实现状态管理。 例如，购物车组件可能包含如下代码： ```html {{ item.name }} - {{ item.quantity }} x {{ item.price }...
纯JS实现购物车&jQuery实现购物车
m0_74315688的博客
03-29 2263
JavaScript购物车。
javaScript购物车案例
l18937842167的博客
10-12 1700
javaScript原生购物车代码案例
用JavaScript来做简单的购物车案例
weixin_48745613的博客
12-07 1463
css代码： * { margin: 0; padding: 0; } a { text-decoration: none; color: rgb(54, 53, 53); } .container { width: 1000px; margin: 20px auto; ...
js写购物车
weixin_53366569的博客
04-01 435
js编写的购物车
JS实现简单的购物车
dxn16638400024的博客
06-30 3428
中是否已经有该产品，有的话数量加一并更新，没有则创建一个新对象并添加到购物车列表中。同时，每次添加或删除购物车物品后都需要更新购物车总计。最后，点击结算按钮后将购物车清空并重置总金额。作为购物车中的物品，它的键是产品 ID，值是包含产品信息的对象。添加至购物车时，首先检查。由于是实现基本的功能，就不弄得多复杂了，代码可以直接Ctrl+c/v，大家可以试一试！这个简单的购物车实现使用了一个对象。
【JavaScript】实现简易购物车
浅陌繁星的博客
01-19 6504
本文主要分享一个简易的使用JavaScript编写的购物车。功能实现了：全选、清空购物车、删除单条商品、数据渲染、总价格计算、删除选中物品、添加和减少商品数量并且实现了操作数据后在浏览器本地永久存储。
js实现购物车，原理简单，代码解释--＞详细
hnspystqxskzlqc的博客
04-06 9077
大家在淘宝或者京东购物时，看到在选中全选按钮，或者其他商品选中，从而触发全选按钮是怎么实现的吗？ 单商品的价格计算随着数量的增多减少而上升或者下降吗？ 总价随着每个商品的价格相加或相减，而变化吗？ 来看看下面的代码吧，实现以上所有功能。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <bo
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值