ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 编程语言> 文章详细

JavaScript 仿淘宝购物车案例

2021-12-31 14:03:48  阅读：199  来源： 互联网

标签：flex shopping JavaScript innerHTML 购物车 querySelector 淘宝 var document


 

 加入购物车

页面

页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 页面结构 -->
   <ul class="cont">
       <!-- <li>
           <div class="productimg">
               <img src="./img/小米电风扇.jpg" alt="重新加载">
           </div>
           <div class="producttext">
               <div class="text1">米家落地扇</div>
               <div class="text2">7羽叶大风量丨智能控制丨12米远距送风丨台地两用</div>
               <div class="price">
                   <span class="newprice">199元</span>
                   <span class="oldprice"><span><del>209元</del></span>
               </div>
               <input type="button" value="加入购物车" class="btn">
           </div>
       </li> -->
   </ul>
   <a href="./cart.html">
   <input type="button" value="我的购物车" class="mycart">
    </a>
   <script src="./js/index.js"></script>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.cont{
    width: 1660px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 20px 20px;
}
.cont li{
    display: flex;
    width: 500px;
    height: 300px;
    margin: 20px 20px;
    flex-direction: row;
    flex-wrap: nowrap;
    border: solid 1px #ccc;
}
.productimg img{
    width: 200px;
    height: 300px;
}
.producttext{
    display: flex;
    margin-left: 10px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-content: center;
}
.text1{
    font-size: 20px;
}
.text2{
    width: 260px;
    font-size: 16px;
    color: grey;
    
}

.newprice,.oldprice{
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin-left: 20px;
}
.newprice{
    color: tomato;
    font-size: 20px;
}
.oldprice{
    color: grey;
    font-size: 14px;
}
.btn{
    width: 150px;
    height: 30px;
    background-color: red;
    color: white;
    border: none;
    border-radius:10px ;
}

js

// 数据结构
var merchandise={
    Id:[0,1,2,3,4,5,6],
    Img:["./img/小米电风扇.jpg","./img/小米路由器.jpg","./img/小米旅行箱.png","./img/小米燃气灶.jpg","./img/小米牙膏.jpg","./img/小米音箱.jpg"],
    merchandiseName:["小米电风扇","小米路由器","小米旅行箱","小米燃气灶","小米牙膏","小米音箱"],
    Text:["7羽叶大风量丨智能控制丨12米远距送风丨台地两用","安全防蹭网 | 支持 IPv6* | 儿童安全上网 | 专为小米智能家居优化","可选尺寸：20英寸、24英寸，环保材料，轻便重量，坚韧有型，4色可选","4200W大火力，猛火爆炒无压力 / 三重补齐设计，节能省时省气 / 10种安全保障 / 230°无级调火","0添加色素防腐剂 / 选用进口研磨剂 / 不伤牙釉质 / 加固牙齿硬度 / 长效冰爽口气","内置小爱同学,快速唤醒 / 立式造型,快捷操作 / 蓝牙5.0,更好兼容性 / Type-C 接口,6小时续航"],
    newprice:[479,129,199,699,12.9,49],
    oldprice:[499,159,259,899,15.9,69]
}
// 获取相应的容器
var cont=document.querySelector(".cont");
// 渲染页面
for (let i = 0; i < merchandise.Img.length; i++) {
    var list=document.createElement("li");
    list.innerHTML=` 
    <div class="productimg" data-cid="${merchandise.Id[i]}">
    <img src="${merchandise.Img[i]}" alt="重新加载">
    </div>
    <div class="producttext">
    <div class="name">${merchandise.merchandiseName[i]}</div>
    <div class="text">${merchandise.Text[i]}</div>
    <div class="price">
        <span class="newprice">${merchandise.newprice[i]}元</span>
        <span class="oldprice"><span><del>${merchandise.oldprice[i]}元</del></span>
    </div>
    <input type="button" value="加入购物车" class="btn">
</div>`
   cont.appendChild(list)
}
// 每个加入购物按钮的事件
//获取相应的按钮
var btnArr=document.querySelectorAll(".btn");
// 创建一个储存商品的地址
var cart={
    cartId:[],
    cartName:[],
    cartImg:[],
    cartText:[],
    cartNewprice:[],
    cartOldprice:[],
    cartNum:[],
    check:[]
};
// 购物车缓存初始化
var shoppingCarInfo = localStorage.getItem("cartName");
if(!shoppingCarInfo){
    localStorage.setItem("cartName", JSON.stringify([]));
}
// 获取相应的数据
var shopping=JSON.parse(localStorage.getItem("cartName"));
if (shopping==0) {
    gettingData();  
}else{
    getting();
}
 


// 工具函数
function gettingData(){
    for (let j = 0; j < btnArr.length; j++) {
        btnArr[j].addEventListener("click",()=>{
        // 获取父级节点的信息
        var father=btnArr[j].parentNode.parentNode;  
        var cid=father.querySelector(".productimg").dataset.cid;
        // 判断里面有没有这个东西没有才往里面添加，有则商品数量加一
        if(cart.cartId.includes(cid)){
            var num=cart.cartId.indexOf(cid)
            cart.cartNum[num]=cart.cartNum[num]+1;
            // 把获取的数据存起来
        localStorage.setItem("cartName",JSON.stringify(cart));
        }else{
            cart.cartId.push(cid);
            cart.cartName.push(father.querySelector(".name").innerHTML);
            cart.cartImg.push(father.querySelector("img").getAttribute("src"));
            cart.cartText.push(father.querySelector(".text").innerHTML);
            cart.cartNewprice.push(father.querySelector(".newprice").innerHTML);
            cart.cartOldprice.push(father.querySelector(".oldprice>span>del").innerHTML);
            cart.cartNum.push(1);
            cart.check.push(1);
            // 把获取的数据存起来
            localStorage.setItem("cartName",JSON.stringify(cart));
            }
        })
    }
}
function getting(){
    shopping=JSON.parse(localStorage.getItem("cartName"));
    for (let j = 0; j < btnArr.length; j++) {
        btnArr[j].addEventListener("click",()=>{
        // 获取父级节点的信息
        father=btnArr[j].parentNode.parentNode;  
        cid=father.querySelector(".productimg").dataset.cid;
        // 判断里面有没有这个东西没有才往里面添加，有则商品数量加一
        if(shopping.cartId.includes(cid)){
             num=shopping.cartId.indexOf(cid)
            shopping.cartNum[num]=shopping.cartNum[num]+1;
            // 把获取的数据存起来
        localStorage.setItem("cartName",JSON.stringify(shopping));
        }else{
            shopping.cartId.push(cid);
            shopping.cartName.push(father.querySelector(".name").innerHTML);
            shopping.cartImg.push(father.querySelector("img").getAttribute("src"));
            shopping.cartText.push(father.querySelector(".text").innerHTML);
            shopping.cartNewprice.push(father.querySelector(".newprice").innerHTML);
            shopping.cartOldprice.push(father.querySelector(".oldprice>span>del").innerHTML);
            shopping.cartNum.push(1);
            shopping.check.push(1);
            // 把获取的数据存起来
            localStorage.setItem("cartName",JSON.stringify(shopping));
            }
        })
    }
}

购物车页码结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/cart.css">
</head>
<body>
    <ul class="ullist">
        <!-- <li class="list">
           <input type="checkbox" name="" id="" class="ckecks">
           <div class="cartimg">
               <img src="./img/小米旅行箱.png" alt="加载失败">
           </div>
           <div class="carttext">
               <div class="cartname">电风扇</div>
               <div class="carttext1">非常棒</div>
           </div>
           <div class="cartprice">
                <span class="oldprice"><del>原价:209元</del></span>
                <span class="newprice">现价:199元</span>
           </div>
           <div class="num">
               <button class="libtn1">+</button>
               <span>1</span>       
               <button class="libtn2">-</button>
           </div>
        </li>
        <div class="del">删除</div> -->
    </ul>
    <div class="end">
        <div class="cont">
            <input type="checkbox" name="" id="" class="checkboxes">全选
            <span class="contbtn2">删除</span>
        </div>
        <a href="./index.html">
        <input type="button" value="继续购物">
        </a>
        <div class="statement">
            <span class="sumnum">总数:0</span>
            <span class="sumprice">总价:0</span>
            <span class="play">去结算</span>
        </div>
    </div>
    <script src="./js/cart.js"></script>
</body>
</html>

一点点css

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

.ullist li{
    display: flex;  
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: stretch;

    width: 1200px;
    height: 200px;
    border-bottom: solid 1px #ccc;
    margin: 40px 40px;
}
.ckecks{
    margin-top: 160px;
}
.cartimg{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}
.cartimg img{
    width: 100px;
    height: 100px;
    display: block;
}
.carttext{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.cartprice{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.num,.del{
    line-height: 200px;
}
.end{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 20px 40px;
    width: 1200px;
    height: 50px;
}
.cont{
    margin-left: 125px;
}
.statement{
    margin: 0 125px;
}
.contbtn2{
   margin: 0 80px; 
}
.sumnum{
    margin:0 80px;
}

写到这里就开始头疼，逻辑可能有点乱

// 取数据
var arr=JSON.parse(localStorage.getItem("cartName"));
// 渲染页面
var ullist=document.querySelector(".ullist");
if(arr.length!=0){
    make();
// 计算总数和总价
getTotalPriceAndTotalNum();
}

// 全选
var list=document.querySelectorAll(".ullist>li");
var ckecks=document.querySelectorAll(".checkbox:checked");
var checkboxes=document.querySelector(".checkboxes");
Alls();
for (let i = 0; i < list.length; i++) {
    list[i].addEventListener("change",()=>{
       Alls();
    })
    
} 
var index=1;
checkboxes.addEventListener("click",()=>{
    var check=document.querySelectorAll(".checkbox")
  if (index%2!=0) {
        for (let i = 0; i < check.length; i++) {
            check[i].checked=false;  
            shopping();
        } 
    }else{
        for (let i = 0; i < check.length; i++) {
            check[i].checked=true;  
            getTotalPriceAndTotalNum()
        }
    }
    
    index++;
})




// 单删除
var delArr=document.querySelectorAll(".del");
for (let j = 0; j < delArr.length; j++) {
    delArr[j].addEventListener("click",()=>{
        delArr[j].parentNode.remove();
        dels(delArr[j].parentNode.querySelector(".cartimg").dataset.cid);
        console.log(delArr[j].parentNode.querySelector(".cartimg").dataset.cid);
        console.log("单次删除"+arr);
        list=document.querySelectorAll(".ullist>li");
        if (list.length==0) {
            checkboxes.checked=false
        }
    });
} 
var contbtn2=document.querySelector(".contbtn2");
// 多个删除
contbtn2.addEventListener("click",()=>{
    var flag=confirm("这些东西怎么牛逼，确定不要了吗？");
       if (flag) {
        var listes=document.querySelectorAll(".ullist>li");
        var iteamCkeks=document.querySelectorAll(".checkbox:checked");

           if (iteamCkeks.length==listes.length) {//全删
            delAll();
            ullist.remove(); 
            shopping();
            localStorage.setItem("cartName",JSON.stringify(arr));
           }else{
            for (let i = 0; i <iteamCkeks.length; i++) {
            //    console.log(iteamCkeks[i].parentNode.querySelector(".cartimg").dataset.cid);
            dels(iteamCkeks[i].parentNode.querySelector(".cartimg").dataset.cid);
            listes[i].remove();
            }
           }
       }
       list=document.querySelectorAll(".ullist>li");
    if (list.length==0) {
        checkboxes.checked=false
    }
})

// })
// 商品数量
var libtn1=document.querySelectorAll(".libtn1")
var libtn2=document.querySelectorAll(".libtn2")
var num=document.querySelectorAll(".num>span")
// 数量加法
for (let i = 0; i < libtn1.length; i++) {
    libtn1[i].addEventListener("click",()=>{
        num[i].innerHTML=Number(num[i].innerHTML)+1;
        numadd(num[i].parentNode.parentNode.querySelector(".cartimg").dataset.cid);
        shopping();
    }) 
}
// 数量减法
for (let i = 0; i < libtn2.length; i++) {
    libtn2[i].addEventListener("click",()=>{
        if (num[i].innerHTML<=1) {
            dels(libtn2[i].parentNode.parentNode.querySelector(".cartimg").dataset.cid);
            num[i].parentNode.parentNode.remove();
            shopping();
            console.log(arr);
        }else{
            num[i].innerHTML=Number(num[i].innerHTML)-1;
            numsub(num[i].parentNode.parentNode.querySelector(".cartimg").dataset.cid);
            shopping();
            console.log(arr);
        }
        list=document.querySelectorAll(".ullist>li");
    if (list.length==0) {
        checkboxes.checked=false
    }
    }) 
    
}
// 工具函数

function make(){
  
    for (let i = 0; i < arr.cartId.length; i++) {
        var temp="";
        if (arr.check[i]==1) {
            temp = "checked";
        }
        var list=document.createElement("li");
        list.innerHTML=`
        <input type="checkbox" name="" id="" class="checkbox" ${temp}>   
        <div class="cartimg" data-cid="${arr.cartId[i]}">
            <img src="${arr.cartImg[i]}" alt="加载失败">
        </div>
        <div class="carttext">
            <div class="cartname">${arr.cartName[i]}</div>
            <div class="carttext1">${arr.cartText[i]}</div>
        </div>
        <div class="cartprice">
             <div class="oldprice"><span><del>原价:${arr.cartOldprice[i]}</del></span></div>
             <span class="newprice">现价:${arr.cartNewprice[i]}</span>
        </div>
        <div class="num">
            <button class="libtn1">+</button>
            <span>${arr.cartNum[i]}</span>       
            <button class="libtn2">-</button>
        </div>
        <div class="del">删除</div>
        `
          ullist.appendChild(list) 
       }
}
function getTotalPriceAndTotalNum(){
    getTotalPrice();//总价
    getTotalNum();//总量
}
function getTotalPrice(){
    var totalPrice=0;
    var temp_info=JSON.parse(localStorage.getItem("cartName"));
    for (let i = 0; i <temp_info.cartId.length; i++) {
        totalPrice+=parseInt( temp_info.cartNum[i])*parseInt( temp_info.cartNewprice[i]);
    }
    document.querySelector(".sumprice").innerHTML=`总价:${totalPrice}`
}
function  getTotalNum(){
    var totalNum=0;
    var temp_info=JSON.parse(localStorage.getItem("cartName"));
    for (let i = 0; i < temp_info.cartId.length; i++) {
       totalNum+=temp_info.cartNum[i]
    }
    document.querySelector(".sumnum").innerHTML=`总数:${totalNum}`
}
function dels(_cid){
    arr.cartId.splice(arr.cartId.indexOf(_cid),1)
    arr.cartImg.splice(arr.cartId.indexOf(_cid),1)
    arr.cartName.splice(arr.cartId.indexOf(_cid),1)
    arr.cartText.splice(arr.cartId.indexOf(_cid),1)
    arr.cartOldprice.splice(arr.cartId.indexOf(_cid),1)
    arr.cartNewprice.splice(arr.cartId.indexOf(_cid),1)
    arr.cartNum.splice(arr.cartId.indexOf(_cid),1)
    arr.check.splice(arr.cartId.indexOf(_cid),1)
    localStorage.setItem("cartName",JSON.stringify(arr));  
    shopping()      
}
function delAll(){
    arr.cartId=[];
    arr.cartImg=[];
    arr.cartName=[];
    arr.cartText=[];
    arr.cartNewprice=[];
    arr.cartOldprice=[];
    arr.cartNum=[];
    arr.check=[];
    localStorage.setItem("cartName",JSON.stringify(arr)); 
    document.querySelector(".sumnum").innerHTML=`总数:0`;
    document.querySelector(".sumprice").innerHTML=`总价:0`
}
function numadd(_num){
    console.log(arr.cartNum[0]);
    arr.cartNum[arr.cartId.indexOf(_num)]+=1
    console.log(arr.cartNum[0]);
    // console.log( arr.cartNum[arr.cartId]);
    localStorage.setItem("cartName",JSON.stringify(arr)); 
}
function numsub(_num){

    arr.cartNum[arr.cartId.indexOf(_num)]-=1
}
function Alls(){
     ckecks=document.querySelectorAll(".checkbox:checked");
    if (ckecks.length==list.length) {
        checkboxes.checked=true;  
        }else{
            checkboxes.checked=false;  
            shopping();
        }
}
function shopping(){
    var checksArr=document.querySelectorAll(".checkbox:checked");
    var nums=0;
    var sums=0;
    if(checksArr.length==0){
        document.querySelector(".sumnum").innerHTML=`总数:0`;
        document.querySelector(".sumprice").innerHTML=`总价:0`
    }else{
        for (let i = 0; i < checksArr.length; i++) {
           nums=checksArr[i].parentNode.querySelector(".num>span").innerHTML-0+nums;
           document.querySelector(".sumnum").innerHTML=`总数:${nums}`
        }
        for (let j = 0; j < checksArr.length; j++) {
            var str=checksArr[j].parentNode.querySelector(".newprice").innerHTML
            str=str.slice(3,-1);
    
            sums+=(checksArr[j].parentNode.querySelector(".num>span").innerHTML-0) *Number(str)
           document.querySelector(".sumprice").innerHTML=`总价:${sums}`
        }
    }
}

标签：flex,shopping,JavaScript,innerHTML,购物车,querySelector,淘宝,var,document
来源： https://blog.csdn.net/weixin_45567213/article/details/122254780

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有