JS-购物车案例 （2022-08-10）

加入购物车页面
 <!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #addGoodContent{
            border-radius: 5px;
            padding: 10px;
            border: 1px solid #000;
            line-height: 30px;
            width: 400px;
        }
        #addGoodContent>span{
            display: inline-block;
            width: 100px;
            letter-spacing: 5px;
        }
        #goodList{
            overflow: hidden;
            margin: 10px 50px;
        }
        .item{
            padding: 10px;
            float: left;
            width: 372px;
            height: 154px;
            overflow: hidden;
            color: #333;
            background-color: #f7f9fa;
            border: 1px solid #f7f9fa;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
            cursor: pointer;
            display: flex;
            flex-direction: row;
        }
        .left{
            margin-right: 10px;
        }
        .left>img{
            width: 150px;
            height: 150px;
        }
        .right>h4{
            color: #333;
            font-size: 18px;
            line-height: 23px;
            margin: 5px 0;
        }
        .right>p{
            font-size: 14px;
            line-height: 22px;
            height: 80px;
        }
        .right span{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 添加商品 -->
    <h2>添加商品</h2>
    <div id="addGoodContent">
        <span>商品名</span> <input type="text"><br>
        <span>商品价格</span> <input type="text"><br>
        <span>商品详情</span> <br> <textarea type="text"></textarea><br>
        <span style="width: 150px;">商品的图片</span> <input type="text"><br>
        <button id="save">添加商品</button>
    </div>
    <h2>商品列表</h2>
    <ul id="goodList">
       
    </ul>
    <a href="./购物车1.html">去购物车页面</a>
    <script>
        //加入商品的功能 cookie来存储的 （大小只有4kb）
        //localStorage 本地存储 他和cookie都是位于浏览器上 但是俩个的大小和特性不一样（5M）
        function addGood(goodName,goodPrice,info,imgUrl){
            //先取出商品列表本身有的数据
            var goodList = localStorage.getItem('goodList')?JSON.parse(localStorage.getItem('goodList')):[]  
            //生成一个id
            var id = Date.now()+Math.random().toFixed(2)
            //初始化一个对象 存储对应的数据
            var good = {
                id,
                goodName,
                goodPrice,
                info,
                imgUrl
            }
            //加给localStroage
            goodList.push(good)
            addGoodToUl(good)
            localStorage.setItem("goodList",JSON.stringify(goodList))
        }
        //获取ul
        var ul = document.getElementById('goodList')
        randerGoodList()
        //给按钮添加事件
        document.querySelector('#save').onclick = function(){
            //获取所有输入的内容
            var inputs = document.querySelectorAll('input')
            var info = document.querySelector('textarea').value
            //调用添加的方法
            addGood(inputs[0].value,Number(inputs[1].value),info,inputs[2].value)
        }
        //商品列表渲染的功能
        function randerGoodList(){
            //根据localstroage里面存的数据 进行渲染
            var goodList = localStorage.getItem('goodList')?JSON.parse(localStorage.getItem('goodList')):[]
            //遍历这个数组进行渲染
            for(var good of goodList){
                addGoodToUl(good)
            }
        }
        function addGoodToUl(good){
            ul.innerHTML += `
                <li class="item">
                    <div class="left">
                        <img src="${good.imgUrl}" alt="">
                    </div>
                    <div class="right">
                        <h4>${good.goodName}</h4>
                        <p>${good.info}</p>
                        <div>
                            <span>￥<b>${good.goodPrice}</b></span>
                            <button onclick="addCar(${good.id})">加入购物车</button>
                        </div>
                    </div>
                </li>
                `
        }
        //加入购物车的功能
        function addCar(id){
            //通过id取出对应的元素
            var item = {}
            var goodList = localStorage.getItem('goodList')?JSON.parse(localStorage.getItem('goodList')):[]
            //遍历这个数组进行渲染
            for(var good of goodList){
              if(id == good.id){
                item = good
              }
            }
            //先取出之前购物车的东西
            var car = localStorage.getItem('car')?JSON.parse(localStorage.getItem('car')):[]
            //count 里面具备id 
            var flag = false //默认为没有
            //查找当前的car里面的内容是否具备这个id
            for(var good of car){
                if(good.id == item.id){  //如果有这个id count++
                    good.count++
                    flag = true
                }
            }
            if(!flag){ // 如果没有这个id count为1
                item.count = 1
                car.push(item)
            }
            //重新设置到localstorage里面去
            localStorage.setItem('car',JSON.stringify(car))
        }
    </script>
</body>
</html>
购物车页面
<!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>Document</title>
    <style>
        .small {
            width: 100px;
        }
    </style>
</head>

<body>
    <table border="1px">
        <thead>
            <tr>
                <th><input type="checkbox" id="selectAll"> 全选</th>
                <th>
                    商品名
                </th>
                <th>
                    商品图片
                </th>
                <th>
                    商品详情
                </th>
                <th>
                    商品价格
                </th>
                <th>
                    商品个数
                </th>
                <th>
                    小计
                </th>
                <th>
                    操作
                </th>
            </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    当前共选中<span class="Count">0</span> 件商品
                </td>
                <td colspan="5" align="right"> 合计 ￥<span class="totalPrice">0</span></td>
            </tr>
        </tfoot>
    </table>
    <script>
        //购物车数据渲染
        // 数据显示在tbody里面
        var tbody = document.querySelector('tbody')
        //调用渲染方法
        randerList()

        function randerList() {
            var car = localStorage.getItem('car') ? JSON.parse(localStorage.getItem('car')) : []
            //先要去localstorage拿对应的购物车数据 car
            //遍历
            for (var good of car) {
                tbody.innerHTML += `
                <tr>
                    <td>
                        <input type="checkbox" class='check'>
                    </td>
                    <td>
                        ${good.goodName}
                    </td>
                    <td>
                        <img class="small" src="${good.imgUrl}" alt="">
                    </td>
                    <td>
                        ${good.info}
                    </td>
                    <td>
                        ￥<span>${good.goodPrice}</span>
                    </td>
                    <td>
                        <button class="btn" ${good.count==1?"disabled='disabled'":""} onclick='changeCount(${good.id})'>-</button>
                        <input type="number" value="${good.count}">
                        <button class="btn" onclick='changeCount(${good.id},true)' >+</button>
                    </td>
                    <td>
                        ￥<span>${good.goodPrice*good.count}</span>
                    </td>
                    <td>
                        <button onclick="rm(${good.id})">移除购物车</button>
                    </td>
                </tr>
                `
            }
        }
        //全选功能
        var selectAll = document.querySelector('#selectAll')
        var checks = document.querySelectorAll('.check')
        //给全选功能做操作
        selectAll.onclick = function () {
            for (var i = 0; i < checks.length; i++) {
                checks[i].checked = this.checked
            }
            computedPrice()
        }
        //给每个添加点击事件
        for (var i = 0; i < checks.length; i++) {
            checks[i].onclick = function () {
                computedPrice()
                if (isSelectAll()) {
                    selectAll.checked = true
                }
            }
        }
        //判断是否全选的方法 如果全选返回true 如果不是返回false
        function isSelectAll() {
            var count = 0
            for (var i = 0; i < checks.length; i++) {
                if (checks[i].checked) {
                    count++
                }
            }
            return count == checks.length
        }
        //计算价格的方法
        function computedPrice() {
            var prices = 0
            var Count = 0;
            var car = localStorage.getItem('car') ? JSON.parse(localStorage.getItem('car')) : []
            console.log(`car`, car);
            for (var i = 0; i < checks.length; i++) {
                if (checks[i].checked) {
                    prices += (car[i].count * car[i].goodPrice)//共计多少总价
                    Count += (car[i].count) //共计多少件商品
                }
            }
            document.querySelector('.totalPrice').innerText = prices //再给到totalPrice
            document.querySelector('.Count').innerText = Count
        } //再给到Count
        //添加数量 //减少数量
        function changeCount(id, isAdd) {
            var car = localStorage.getItem('car') ? JSON.parse(localStorage.getItem('car')) : []
            //根据这个id获取对应的商品
            for (var good of car) {
                if (id == good.id) {
                    if (isAdd) {
                        good.count++
                    } else {
                        good.count--
                    }
                }
            }
            //重新设置进去
            localStorage.setItem('car', JSON.stringify(car))
            location.reload()
        }
        //移除购物车的方法
        function rm(id) {
            var car = localStorage.getItem('car') ? JSON.parse(localStorage.getItem('car')) : []
            var index = -1//-1的下标不存在
            //根据这个id获取对应的商品
            for (var i in car) {
                if (id == car[i].id) {
                    index = i
                }
            }
            car.splice(index, 1)
            //重新设置进去
            localStorage.setItem('car', JSON.stringify(car))
            //重新渲染 重新加载
            location.reload()
        }
    </script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容