MENU

购物车Demo

• April 27, 2019 • Read: 620 • Web Program

购买页面

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>

    <body>

        <div class="container">

            <a href="car.html" style="margin-top:20px" class="btn btn-success pull-right">

                <span id="" class="glyphicon glyphicon-shopping-cart">
                 
             </span> 我的购物车
            </a>

            <div class="clearfix">

            </div>
            <hr />

            <table style="margin-top: 20px;" border="" class="table table-hover table-bordered table-striped" cellspacing="" cellpadding="">
                <tr>

                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>操作</th>
                </tr>
            </table>

        </div>

        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
        <script src="js/jquery3.min.js" type="text/javascript" charset="utf-8"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="js/bootstrap.min.js"></script>
    </body>

    <script type="text/javascript">
        //商品信息
        //测试
        var product = [
            { bookId: 1, bookname: "往事随风", price: 58.00 },
            { bookId: 2, bookname: "道德经", price: 88.00 },
            { bookId: 3, bookname: "三生三世十里桃花", price: 69.00 },
            { bookId: 4, bookname: "大主宰", price: 50.00 },
            { bookId: 5, bookname: "全职高手", price: 50.00 },
            { bookId: 6, bookname: "哈哈哈?", price: 49.00 },
            { bookId: 7, bookname: "天下第一", price: 79.00 },
            { bookId: 8, bookname: "html+css", price: 79.00 },
            { bookId: 9, bookname: "php从入门到放弃", price: 79.00 },
            { bookId: 10, bookname: "mysql从删库到跑路", price: 69.00 }

        ];

        for(let k = 0; k < product.length; k++) {

            var str = `<tr>
               <td>${product[k].bookId}</td>
               <td>${product[k].bookname}</td>
               <td>¥:${product[k].price}.00</td>
               <td>
                   
                   <a href="javascript:void(0)" onclick="addCar(${k})" class="btn btn-danger btn-xs">加入购物车</a>
               </td>
               
           </tr>`;

            $(".table").append(str);
        }
        // 去cookie 读取数据
        var arr;
        // 点击加入购物车
        if(document.cookie == "") {//当cookie里面没有商品
            console.log(document.cookie);
            arr = [];
        } else {
            console.log(document.cookie);
            //处理COOKIE数据
            arr = document.cookie.split(";")
            var data = arr[0].split("=");
            var str = data[1];
            var bookinfo = eval("(" + str + ")");//转为json对象
            console.log(bookinfo);
            arr = bookinfo;
            for(var j = 0; j < arr.length; j++) {
                product[arr[j].bookId - 1].count = arr[j].count;//使原始数据里面的count数量继承已经添加的数量

            }
            console.log(arr)
        }
        function addCar(id) {//定义增加商品数量
            var item = product[id];
            if(item.count == undefined) {
                item.count = 1;//添加一个表示数量的字段
                arr.push(item); //  第一次 
            } else {//点击增加商品时候
                item.count++;
                for(var jj in arr) {
                    if(arr[jj].bookId == item.bookId) {
                        arr[jj].count = item.count//使自加后的数量跟生成的数组里面商品数量同步
                    }
                }
            }
            console.log(item)
            // 存入到cookie 
            var str = JSON.stringify(arr)
            // 设置cookie的声明周期
            var date = new Date();
            var currentTime = date.getTime(); //毫秒 
            var lifeTime = currentTime + 10000 * 1000 // 保存30秒24*3600*
            date.setTime(lifeTime); // 设置声明周期
            document.cookie = "item=" + str + ";expires=" + date.toGMTString();
        }
    </script>

</html>

购物车页面

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>

    <body>

        <div class="container">

            <h2 class="text-center">我的购物车</h2>

            <hr />

            <a href="shop.html" style="margin-top:20px" class="btn btn-success pull-right text-danger">

                <span id="" class="glyphicon glyphicon-home text-danger">
                 
             </span> 继续购物
            </a>

            <div class="clearfix">

            </div>
            <hr />

            <table style="margin-top: 20px;" border="" class="table table-hover table-bordered table-striped" cellspacing="" cellpadding="">
                <tr>

                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>商品价格</th>

                    <th>
                        商品数量
                    </th>
                    <th> 总价</th>
                    <th>操作</th>
                </tr>
            </table>

            <hr />

            <h3 class="pull-left">商品总价:</h3> <button id="zong" class="btn btn-danger btn-lg">去结算</button>

        </div>

        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
        <script src="js/jquery3.min.js" type="text/javascript" charset="utf-8"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="js/bootstrap.min.js"></script>
    </body>

    <script type="text/javascript">
        // 去cookie 读取数据
        var sum = null;
        var arr = document.cookie.split(";");

        var data = arr[0].split("=");

        var str = data[1];

        var bookinfo = eval("(" + str + ")");

        console.log(bookinfo);

        for(k in bookinfo) {

            var tprice = bookinfo[k].count * bookinfo[k].price;
            sum += tprice;

            var str = `<tr class='book'>
               <td>${bookinfo[k].bookId}</td>
               <td>${bookinfo[k].bookname}</td>
                   
               <td>${bookinfo[k].price}</td>
               <td>${bookinfo[k].count}</td>
               <td>${tprice}</td>
               <td>
                   
                   <a href="javascript:;" class="shanchu btn btn-danger btn-xs">移除</a>
               </td>
               
           </tr>`

            $(".table").append(str);
        //    $(".shanchu").eq(k).data("bookId", bookinfo[k].bookId)
        }

        $("#zong").click(function() {
            if(sum == null) {
                sum = 0
            }
            var tt = confirm("共需支付¥" + sum + "元,点击确认付款!");

            if(tt) {

                if(sum == 0) {
                    alert("不买点个锤子!")
                } else {
                    alert("不给钱点个锤子!")
                }
            } else {
                if(sum == 0) {
                    alert("不买点个锤子!")
                } else {
                    alert("没钱点个锤子!")
                }

            }

        })

        $(".shanchu").click(function() {
            bookinfo.splice($(this).parents(".book").index() - 1, 1);
            // 存入到cookie 
            var str = JSON.stringify(bookinfo)
            // 设置cookie的声明周期
            var date = new Date();
            var currentTime = date.getTime(); //毫秒 
            var lifeTime = currentTime + 100 * 1000 // 保存30秒24*3600*
            date.setTime(lifeTime); // 设置声明周期
            document.cookie = "item=" + str + ";expires=" + date.toGMTString();
            location.reload();
        })
    </script>

</html>
Archives QR Code
QR Code for this page
Tipping QR Code
Leave a Comment