简单的购物车和购物车结算

比眉伴天荒 2022-06-09 10:09 352阅读 0赞

购买部分  
HTML部分

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>加入购物车</title>
            <link rel="stylesheet" type="text/css" href="../css/reset.css" />
            <link rel="stylesheet" type="text/css" href="../css/JD.css" />
            <script type="text/javascript" src="../js/cookies.js"></script>
            <script type="text/javascript" src="../js/JD.js"></script>
        </head>
        <body>
            <div id="aside-cart">
                <span>
                    <img src="../img/cart.png" />购物车
                </span>
            </div>
            <div id="goods" class="clear">
                <dl data-id="id01">
                    <dt>
                        <img src="../img/1.jpg" />
                    </dt>
                    <dd>
                        <strong>¥259.00</strong>
                        <p>春款真皮坡跟大码单鞋内...</p>
                        <button>加入购物车</button>
                    </dd>
                </dl>
    
                <dl data-id="id02">
                    <dt>
                        <img src="../img/2.jpg" />
                    </dt>
                    <dd>
                        <strong>¥289.00</strong>
                        <p>春款真皮坡跟大码单鞋内...</p>
                        <button>加入购物车</button>
                    </dd>
                </dl>
    
                <dl data-id="id03">
                    <dt>
                        <img src="../img/3.jpg" />
                    </dt>
                    <dd>
                        <strong>¥299.00</strong>
                        <p>春款真皮坡跟大码单鞋内...</p>
                        <button>加入购物车</button>
                    </dd>
                </dl>
    
                <dl data-id="id04">
                    <dt>
                        <img src="../img/4.jpg" />
                    </dt>
                    <dd>
                        <strong>¥309.00</strong>
                        <p>春款真皮坡跟大码单鞋内...</p>
                        <button>加入购物车</button>
                    </dd>
                </dl>
            </div>
        </body>
    </html>

CSS部分

@charset "utf-8";
    /*body,html{ height:100% ; }*/
    #goods{ width: 820px; margin: 100px auto; }
    #goods dl{ height: 376px; width: 180px; border: solid 1px #e0e0e0; padding: 10px 9px 8px 9px; float: left; margin-right: 5px; }
    #goods dl dt { height: 239px; width: 180px; }
    #goods dl dd strong{ display: block; height: 61px; line-height: 61px; font-size: 16px; color: #ff3300; text-align: center; font-weight: 900; }
    #goods dl dd p{ height: 27px; line-height: 27px; font-size: 14px; text-align: center; }
    #goods dl dd button{ width: 144px; height: 39px; line-height: 39px; text-align: center; background: #f99c1b; color: #fef4e9; outline: none; border: solid 1px #da7c0c; border-radius: 5px; margin:6px 0 0 17px; font-size: 16px; }
    
    #aside-cart{ position: fixed; top: 0; right: 0; width:35px; height: 100%; background: #000000; color: #FFFFFF; text-align: center; padding: 200px 0 0 0; cursor: pointer; }
    #aside-cart span{ display: block; font-size: 20px; }
    #aside-cart span img{ display: block; }

js部分

共用的js部分

//==================================设置bookie通用方法==========================
    function setCookie(name,value,expires){ 
        document.cookie = name + '=' + value;
    
        if(expires){
            var newTime = new Date();
            time = newTime.getTime() + expires*1000;
            newTime.setTime(time);
            document.cookie += ";expires="+newTime;  //cookie的过期时间设置需要为标准时间
        }
    }
    
    
    //==================================获取cookie通用方法==========================
    function getCookie(name){ 
        var cookie = document.cookie;
        var arr = cookie.split(' ;');
        var obj = [];
    
        for(var i = 0; i < arr.length; i++){
            var arrPart = arr[i].split('=');    
            if(arrPart[0] == name){
                return decodeURIComponent(arrPart[1]);
            }
        }
        return false;
    }
    
    
    
    //==================================获取id名节点通用方法==========================
    
    function $(id){ 
        return document.getElementById(id);
    }

结算页面  
HTML部分

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>购物车结算</title>
            <link rel="stylesheet" type="text/css" href="../css/reset.css" />
            <link rel="stylesheet" type="text/css" href="../css/JD Cart.css" />
            <script type="text/javascript" src="../js/cookies.js"></script>
            <script type="text/javascript" src="../js/JD Cart.js"></script>
        </head>
        <body>
            <div id="header">
                <ul class="clear">
                    <li class="header-cb">
                        
                        <input type="checkbox" id="selectAll" />
                        <label for = 'selectAll'></label>
                        全选
                    </li>
                    <li class="header-mes">
                        商品信息
                    </li>
                    <li class="header-args">
                        商品参数
                    </li>
                    <li class="header-price">
                        单价
                    </li>
                    <li class="header-count">
                        数量
                    </li>
                    <li class="header-sum">
                        金额
                    </li>
                    <li class="header-action">
                        操作
                    </li>
                </ul>
            </div>
            <div id="main">
            
            </div>
            <div id="footer">
                <div class="footer-right">
                    <div id="allCount">
                        已选商品<span>0</span>件
                    </div>
                    <div id="allSum">
                        共计：<span>￥0</span>
                    </div>
                    <div id="goBuy">
                        结算
                    </div>
                </div>
            </div>
        </body>
    </html>

CSS部分

@charset "utf-8";
    #header{ width: 1200px; height: 52px; margin: 100px auto 0; /*border: solid 1px #CCCCCC;*/ overflow: hidden; }
    
    #header ul li{ float: left; }
    #header ul .header-cb{ width: 87px; height: 52px; position: relative; text-align: center; line-height: 52px; }
    #header ul .header-cb input[type='checkbox']{ position: absolute; z-index: 0; left: -20px; top: -20px; }
    #header ul .header-cb label{ position: absolute; height: 12px; width: 12px; border: solid 1px #b8b8b8; top: 19px; left: 10px; }
    
    #header ul .header-mes{ width: 187px; height: 52px; line-height: 52px; padding-left: 132px; }
    #header ul .header-args{ width: 237px; height: 52px; line-height: 52px; }
    #header ul .header-price{ width: 130px; height: 52px; line-height: 52px; }
    #header ul .header-count{ width: 120px; height: 52px; line-height: 52px; }
    #header ul .header-sum{ width: 140px; height: 52px; line-height: 52px; }
    #header ul .header-action{ width: 167px; height: 52px; line-height: 52px; }
    
    #main{ width: 1200px; margin: 0 auto 120px; }
    
    /***********************添加的商品样式************************/
    .shops-box{ width: 1200px; }
    .shops-box .shops-name{ height: 36px; line-height: 36px; position: relative; overflow: hidden; padding-left: 29px; }
    .shops-box .shops-name input[type='checkbox']{ position: absolute; z-index: 0; left: -20px; top: -20px; }
    .shops-box .shops-name label{ position: absolute; height: 12px; width: 12px; border: solid 1px #b8b8b8; top: 11px; left: 10px; }
    .shops-box .shops-goods{ border: solid 1px #b8b8b8; }
    .shops-box .shops-goods ul{ width: 1198px; border-bottom: solid 1px #e7e7e7; }
    .shops-box .shops-goods ul li{ float: left; }
    .shops-box .shops-goods ul .shops-goods-chk{ width: 58px; height: 130px; position: relative; overflow: hidden; }
    .shops-box .shops-goods ul .shops-goods-chk input[type='checkbox']{ position: absolute; z-index: 0; left: -20px; top: -20px; }
    .shops-box .shops-goods ul .shops-goods-chk label{ position: absolute; height: 12px; width: 12px; border: solid 1px #b8b8b8; top: 21px; left: 24px; }
    .shops-box .shops-goods ul .shops-goods-mes{ width: 300px; height: 130px; margin-right: 36px; }
    .shops-box .shops-goods ul .shops-goods-mes .goods-img{ width:80px; height: 130px; float: left; }
    .shops-box .shops-goods ul .shops-goods-mes img{ width: 80px; height: 80px; margin-top: 24px; }
    .shops-box .shops-goods ul .shops-goods-mes .goods-text{ width: 196px; height: 82px; float: left; padding:24px 12px; }
    
    .shops-box .shops-goods ul .goods-arg{ height: 82px; width: 214px; color: #9c9c9c; padding:24px 12px; }
    .shops-box .shops-goods ul .goods-price{ width: 106px; height: 82px; padding:24px 12px; font-weight: 900; font-size: 14px; }
    .shops-box .shops-goods ul .goods-count{ width: 96px; height: 82px; padding:24px 12px; }
    .shops-box .shops-goods ul .goods-count a{ width: 17px; height: 23px; border: solid 1px #e5e5e5; background: #f0f0f0; float: left; text-align: center; line-height: 23px; cursor: pointer; }
    .shops-box .shops-goods ul .goods-count .subt{ border-right-width: 0; } 
    .shops-box .shops-goods ul .goods-count .addt{ border-left-width: 0; }
    
    .shops-box .shops-goods ul .goods-count input[type='text']{ float: left; height: 23px; width: 39px; border: solid 1px #aaaaaa; outline: none; text-align: center }
    
    .shops-box .shops-goods ul .goods-sum{ width: 115px; height: 82px; padding:24px 12px; color: #ff0000; font-weight: 900; }
    .shops-box .shops-goods ul .goods-remove{ width: 153px; height: 82px; padding:24px 12px; }
    .shops-box .shops-goods ul .goods-remove span{ cursor: pointer; }
    
    /*=============footer=============*/
    #footer{ width: 1200px; height: 50px; margin: 0 auto; background: #e5e5e5; position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; }
    
    #footer .footer-right{ float: right; width: 389px; }
    #footer .footer-right #allCount{ width: 137px; height: 50px; line-height: 50px; text-align: center; color: #3c3c3c; float: left; }
    #footer .footer-right #allCount span{ color: #ff4400; margin: 0 12px; font-weight: 900; }
    #footer .footer-right #allSum{ width: 132px; height: 50px; line-height: 50px; text-align: center; color: #3c3c3c; float: left; }
    #footer .footer-right #allSum span{ color: #ff4400; margin: 0 12px; font-weight: 900; }
    #footer .footer-right #goBuy{ color: #FFFFFF; font-size: 22px; background: #ff4400; float: left; width: 120px; height: 50px; line-height: 50px; text-align: center; border-radius: 2px; }
    
    .mark{ background:url(../img/mark1.png) no-repeat center center; }

js部分

总结：  
1、这个的样式是我从js代码大全仿造的，他原来的代码时用jq写的，好吧！其实我还不会jq。  
2、第二个页面是不能够同步更新cookie中的内容的，不过要实现也是可以的，将每次点击加号或者减号后的商品列表的数量更新到cookie中就行了。（好吧！至少我是这么想的）  
3、在向cookie中添加内容的时候，会出现id值为NUll的情况，虽然我加了必须要id存在的条件才能设置cookie，但是并不清除为什么会出现这种情况。  
4、看到我写的博客会有大于1的浏览量，我好慌张，因为我只是用这个博客在存代码和观察自己的学习进度。写的代码质量又不高，好担心会误导看到的人，罪过……  
5、继续学习吧！然后再回来调整或者写个新的页面