• 原生js--购物车案例

    目录

    案例要求：

    添加商品页面 shop.html

    购物车页面 car.html

    反选全选思路

    数量加减思路

    选中删除按钮

    总价计算

    案例要求：

    • 点击添加商品弹出对话框，添加成功渲染到页面
    • 页面实现删除商品，添加购物车跳转到购物车页面
    • 商品存在数量增加，商品不存在就添加商品
    • 购物车页面实现全选反选，删除，总计，价格排序，选中删除效果

    添加商品页面 shop.html

    1.  
    2. <style>
    3.     #int {
    4.         display: none;
    5.     }
    6. style>
    7.  
    8. <body>
    9.     <div id="box">
    10.         <button id="addshop">添加商品button>
    11.         <div id="int">
    12.             <input type="text" placeholder="输入商品" id="name"><br />
    13.             <input type="text" placeholder="输入价格" id="price"><br />
    14.             <button id="addok">添加button>
    15.         div>
    16.         <table>
    17.             <thead>
    18.                 <tr>
    19.                     <th>全选<input type="checkbox" id="all">th>
    20.                     <th>序号th>
    21.                     <th>姓名th>
    22.                     <th>价格th>
    23.                     <th>操作th>
    24.                 tr>
    25.             thead>
    26.             <tbody>
    27.  
    28.             tbody>
    29.         table>
    30.     div>
    31. body>
    32. <script>
    33.     let btn = document.getElementById('addshop')
    34.     let int = document.getElementById('int')
    35.     let name = document.getElementById('name')
    36.     let price = document.getElementById('price')
    37.     let addok = document.getElementById('addok')
    38.     let tbody = document.querySelector("tbody")
    39.     // 定义一个空数组
    40.     let arr = []
    41.     // 添加商品弹出对话框
    42.     btn.onclick = () => {
    43.         int.style.display = 'block'
    44.     }
    45.     // 添加商品按钮
    46.     addok.onclick = () => {
    47.         if (name.value != "" && price.value != "") {
    48.             let obj = {
    49.                 name: name.value,
    50.                 price: price.value,
    51.                 num:1,
    52.                 isCheck:false,
    53.             }
    54.             arr.push(obj)
    55.             // 遮罩层消失
    56.             int.style.display = 'none'
    57.             render(arr)
    58.         } else {
    59.             alert("请正确填写")
    60.         }
    61.     }
    62.     int.onclick = () => {
    63.         // 阻止冒泡 和 捕获
    64.         event.stopPropagation()
    65.     }
    66.     // 渲染arr
    67.     function render(arr) {
    68.         let str = ""
    69.         arr.forEach((item, index) => {
    70.             str += `
    71.                 
    72.                     
    73.                     ${index + 1}
    74.                     ${item.name}
    75.                     ${item.price}
    76.                     
    77.                 
    78.             `
    79.         })
    80.         console.log(str)
    81.         tbody.innerHTML = str
    82.     }
    83.     // 删除按钮
    84.     function del(i){
    85.         console.log(i);
    86.         arr.splice(i,1)
    87.         render(arr)
    88.     }
    89.     // 添加购物车
    90.     function addCar(index){
    91.         let car=[]
    92.         let getlist=localStorage.getItem('token')
    93.         if(getlist){
    94.             car=JSON.parse(getlist)
    95.         }
    96.         // 查找商品，如果不等于-1，说明商品已经存在，存在就添加商品的数量
    97.         let list=car.findIndex((item)=>{
    98.             return item.name==arr[index].name
    99.         })
    100.         if(list != -1){
    101.             // 商品存在，添加商品数量
    102.             car[list].num++
    103.         }else{
    104.             // 商品不存在，添加购物车
    105.             car.push(arr[index])
    106.         }
    107.         // 保存到本地
    108.         window.localStorage.setItem('token',JSON.stringify(car))
    109.         // 跳转购物车页面
    110.         location.href='car.html'
    111.     }
    112. script>

    由于我们涉及到了页面跳转，所以我们把数据保存在本地，然后在购物车页面取到数据，然后再对数据进行渲染

    购物车页面 car.html

    1. <style>
    2.     h4 {
    3.         margin-left: 50%;
    4.         margin-top: 10px;
    5.     }
    6. style>
    7.  
    8. <body>
    9.     <h4>购物车页面h4>
    10.     <button onclick="back()">返回button>
    11.     <table>
    12.         <thead>
    13.             <tr>
    14.                 <th>全选<input type="checkbox" id="all" onchange=quan() >th>
    15.                 <th>序号th>
    16.                 <th>姓名th>
    17.                 <th>价格 <button onclick="jiang()">降序button>th>
    18.                 <th>数量th>
    19.                 <th>小计th>
    20.                 <th>操作th>
    21.             tr>
    22.         thead>
    23.         <tbody>
    24.  
    25.         tbody>
    26.     table>
    27.     <p>总计：<span id="total">span>p>
    28.     <button onclick="delall()">选中删除button>
    29. body>
    30. <script>
    31.     let alll=document.getElementById('all')
    32.     let tbody = document.querySelector("tbody")
    33. //定义一个空数组
    34.     let car = []
    35. //从本地获取到数据
    36.     let getlist = localStorage.getItem('token')
    37.     if (getlist) {
    38.         car = JSON.parse(getlist)
    39.     }
    40.     render(car)
    41.     // 降序
    42.     function jiang() {
    43.         car.sort((a, b) => {
    44.             return b.price - a.price
    45.         })
    46.         render(car)
    47.     }
    48. //数据渲染
    49.     function render(car) {
    50.         let str = ""
    51.         car.forEach((item, index) => {
    52.             str += `
    53.                 
    54.                     ${index}) ${item.isCheck?'checked':''}>
    55.                     ${index + 1}
    56.                     ${item.name}
    57.                     ${item.price}
    58.                     ${item.num}
    59.                     ${item.price * item.num}
    60.                     
    61.                 
    62.             `
    63.         })
    64.         tbody.innerHTML = str
    65.         total()
    66.     }
    67.     var num = localStorage.getItem('token')
    68.     // console.log(JSON.parse(num)[0].num);
    69.     // 选中删除
    70.     function delall(){
    71.         let bb=JSON.parse(localStorage.getItem('token')) 
    72.        let list=bb.filter((item)=>{
    73.                 return item.isCheck===false
    74.         })     
    75.         localStorage.setItem('token',JSON.stringify(list) )
    76.         render(list)
    77.         
    78.     }
    79.     //数量减
    80.     function jian(e) {
    81.         let bb=JSON.parse(localStorage.getItem('token')) 
    82.         if( bb[e].num=1){
    83.             bb[e].num=1
    84.         }else{
    85.             bb[e].num--
    86.         }
    87.         localStorage.setItem('token',JSON.stringify(bb) )
    88.         render(bb)
    89.     }
    90.     // 数量加
    91.     function jia(e) {
    92.         let bb=JSON.parse(localStorage.getItem('token')) 
    93.         bb[e].num++
    94.         console.log(bb);
    95.         localStorage.setItem('token',JSON.stringify(bb) )
    96.         render(bb)
    97.  
    98.     }
    99.     // 返回按钮
    100.     function back() {
    101.         location.href = 'shop.html'
    102.     }
    103.     // 删除
    104.     function del(i) {
    105.         console.log(i);
    106.         car.splice(i, 1)
    107.         render(car)
    108.     }
    109.     // 反选
    110.     function xuan(e){
    111.         let bb=JSON.parse(localStorage.getItem('token')) 
    112.         // bb[e].isCheck=bb[e].isCheck
    113.         console.log(bb[e].isCheck);
    114.         bb[e].isCheck=!bb[e].isCheck
    115.         localStorage.setItem('token',JSON.stringify(bb) )
    116.         if(bb.every((item)=>{return item.isCheck}
    117.         )){
    118.             alll.checked=true
    119.         }else{
    120.             alll.checked=false
    121.         }
    122.         render(bb)
    123.         
    124.     }
    125.     
    126. // 全选
    127.     function quan(){
    128.         let bb=JSON.parse(localStorage.getItem('token')) 
    129.         if(alll.checked){
    130.             bb.forEach((item)=>{ return item.isCheck=true})
    131.         }else{
    132.             bb.forEach((item)=>{ return item.isCheck=false})
    133.         }
    134.         localStorage.setItem('token',JSON.stringify(bb) )
    135.         render(bb)
    136.     }
    137.     // 总计
    138.     function total(){
    139.         let bb=JSON.parse(localStorage.getItem('token')) 
    140.         let list=bb.filter((item)=>{
    141.             return item.isCheck === true
    142.         })
    143.         let sum=0
    144.         list.map((item,index)=>{
    145.             sum+=item.price*item.num
    146.         })
    147.         // 获取span标签的dom节点
    148.         let total=document.getElementById('total')
    149.         total.innerHTML=sum
    150.  
    151.     }
    152.  
    153. script>

    反选全选思路

    反选：我们传入每行数据的id，通过id获取每行数据的选中状态，使用every方法，如果每一行数据都为true，全选状态也为true

    全选：绑定一个onchange事件，如果全选按钮状态为true，那么数据循环状态变为true

    数量加减思路

    绑定onclick事件，传递id值，从本地获取到数据的数量，然后对数据进行加减操作，最后再保存到本地

    选中删除按钮

    从本地获取数据，过滤数据，然后返回选中状态为false的数据，保存到本地，rander一下数据

    总价计算

    获取本地数据，筛选出来状态为true的数据，定义一个变量，循环数据数量相加，获取总价的dom节点，使用innerHTML对数据进行重写，总价就会随数据的变化而变化

  • 相关阅读:
    [MICROSAR Adaptive] --- 开发环境准备
    SiO2-NH2/Fe3O4表面氨基化的Fe3O4/SiO2复合磁性纳米粒子（齐岳试剂）
    Jackson 化学发光免疫印迹解决方案
    Leveldb学习笔记：leveldb的使用与原理探究
    助力企业降本增效，「WorkPlus SE专业版」正式发布！
    Hive工作原理
    jxTMS设计思想之兴趣点
    wordpress制作主题步骤
    文件描述符--Linux
    OpenTelemetry 实践指南：历史、架构与基本概念
  • 原文地址：https://blog.csdn.net/qq_60976312/article/details/126487066