商品列表

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <ul class="goods">
            <li data-guid="g01">
                <p>短袖衬衣</p>
                <p class="price">98.88</p>
                <div class="add2cart">
                    <button>添加到购物车</button>
                </div>
            </li>
            <li data-guid="g02">
                <p>短袖衬衣2</p>
                <p class="price">88.88</p>
                <div class="add2cart">
                    <button>添加到购物车</button>
                </div>
            </li>
            <li data-guid="g03">
                <p>短袖衬衣3</p>
                <p class="price">9.98</p>
                <div class="add2cart">
                    <button>添加到购物车</button>
                </div>
            </li>
            <li data-guid="g04">
                <p>短袖衬衣4</p>
                <p class="price">8.88</p>
                <div class="add2cart">
                    <button>添加到购物车</button>
                </div>
            </li>
        </ul>
        <a href="结算.html">去结算</a>
        <script>
            var goods = document.querySelector(".goods");
            console.log(goods)
            var carlist = [];
            var cookie = document.cookie.split('; ');
            for(var i = 0; i < cookie.length; i++) {
                var arr = cookie[i].split('=');
                if(arr[0] === 'carlist') {
                    // 在cookie中得到的数据都是字符串
                    // 所以需要转换成数组/对象
                    carlist = JSON.parse(arr[1]);
                }
                console.log(carlist)
            }
            goods.addEventListener("click", function(e) {
                console.log(e.target.nodeName.toLowerCase() === "button")
                if(e.target.nodeName.toLowerCase() === "button") {
                    var li = e.target.parentNode.parentNode;
                    var liId = li.getAttribute('data-guid');
                    console.log(liId)
                }
                for(var i = 0; i < carlist.length; i++) {
                    if(carlist[i].gid === liId) {
                        carlist[i].num++;
                        break;
                    }
                }
                console.log(i)
                console.log(li.children[0].innerHTML)
                if(i === carlist.length) {
                    // 创建一个对象，用于保存商品信息
                    var obj = {};
                    obj.gid = liId;
                    obj.name = li.firstElementChild.innerHTML;
                    obj.price = li.children[1].innerHTML;
                    obj.num = 1;
                    carlist.push(obj);
                }
                console.log(carlist);

                var now = new Date();
                now.setDate(now.getDate() + 3);
                document.cookie = ('carlist=' + JSON.stringify(carlist) + ';expires=' + now);
            })
        </script>
    </body>

</html>

购物车

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul>
        </ul>
        <button id="btnClear">清除购物车</button>
        <script>
            var carlist = [];
            var cookie = document.cookie.split('; ');
            for(var i = 0; i < cookie.length; i++) {
                var arr = cookie[i].split('=');
                if(arr[0] === 'carlist') {
                    // 在cookie中得到的数据都是字符串
                    // 所以需要转换成数组/对象
                    carlist = JSON.parse(arr[1]);
                }
                console.log(carlist)
            }
            var ul = document.querySelector("ul")

            function render() {
                var str = carlist.map(function(item) {
                    return "<li data-guid='" + item.gid + "'>" + item.name + "</li>"
                }).join("")
                console.log(str);
                ul.innerHTML = "";
                ul.innerHTML = str;
            }
            render();
            ul.addEventListener("click", function(e) {
                console.log(e.target.getAttribute("data-guid"))
                var liId = e.target.getAttribute("data-guid");
                //删除
                /*for(var i=0;i<carlist.length;i++){
                    if(carlist[i].gid === liId){
                        carlist.splice(i,1);
                        render();
                        var now = new Date();
                        now.setDate(now.getDate() + 3);
                        document.cookie = 'carlist=' + JSON.stringify(carlist) + ';expires='+now;
                        break;
                    }
                }*/
                //增加
                for(var i = 0; i < carlist.length; i++) {
                    if(carlist[i].gid === liId) {
                        carlist[i].num++;
                        render();
                        var now = new Date();
                        now.setDate(now.getDate() + 3);
                        document.cookie = 'carlist=' + JSON.stringify(carlist) + ';expires=' + now;
                        break;
                    }
                }
            })
            // 清空购物车
            // 删除carlist这个cookie
            // 利用设置过期时间达到删除的效果。
            var btnClear = document.querySelector("#btnClear");
            btnClear.onclick = function() {
                var now = new Date();
                now.setDate(now.getDate() - 1);
                document.cookie = 'carlist=null;expires=' + now;
                // 清空数组
                carlist = [];
                render();
            }
        </script>
    </body>

</html>

Wscats / CV

day12 #21

商品列表

购物车