找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发网站案例_js实现购物车效果

2018-08-03 20:42:22 分类：JavaScript 阅读(679) 评论(0)

前端开发购物网站的技术点|购物网站前端开发|qt 前端开发环境搭建

本人第一次尝试用这种方式去实现一个效果，如有不对的地方欢迎指出

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul li {
            list-style: none;
        }
        body {
            font-family: microsoft yahei;
        }
        .ul-list {
            overflow: hidden;
        }
        .box {
            width: 765px;
            margin: 0 auto;
        }
        .ul-list li {
            float: left;
            height: 100px;
            margin: 10px;
            cursor: pointer;
        }
        .ul-list li img {
            width: auto;
            height: 100px;
        }
        .shopping {
            margin: 10px;
            border: 1px solid #EBEBEB;
            background: #FAFAFA;
        }
        .shopping-cart {
            margin-top: 10px;
            background: #eee;
        }
        .shopping-icon {
            width: 100px;
            height: auto;
            text-align: center;
            position: relative;
            float: left;
        }
        .shopping img {
            width: 80px;
            height: auto;
        }
        .shopping span#cartText {
            position: absolute;
            top: 10px;
            left: 50%;
            margin-left: -20px;
            color: red;
            font-weight: bold;
            border: 2px solid #ddd;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            background: #fff;
        }
        .shopping-list {
            padding: 0 20px 20px;
        }
        .shopping-list li {
            padding: 20px;
            border-bottom: 1px dashed #ccc;
            overflow: hidden;
        }
        .del {
            float: right;
            cursor: pointer;
        }
        .del img {
            width: 19px;
            height: auto;
        }
        .shopping-warn {
            line-height: 84px;
        }
        .shopping-warn span {
            color: red;
            font-size: 16px;
            margin: 0 5px;
        }
        #cartLi img {
            float: left;
            margin-right: 20px;
        }
        .title {
            float: left;
        }
        .checkbox {
            float: left;
            margin-right: 20px;
        }
        .price,
        .cart-num,
        .total-price {
            margin-left: 10%;
            float: left;
        }
        #cartText {
            display: none;
        }
        .cart-num span {
            width: 25px;
            line-height: 25px;
            border: 1px solid #ccc;
            text-align: center;
            float: left;
            font-weight: bold;
            font-size: 20px;
            cursor: pointer;
        }
        .cart-num input {
            width: 50px;
            text-align: center;
            line-height: 25px;
            height: 25px;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            border-left: 0;
            border-right: 0;
            float: left;
        }
        .total-price {
            color: #FF2832;
        }
    </style>
</head>
<body>
    <div class=”box”>
        <ul class=”ul-list” id=”liList”>
            <li>
                <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201604/20/150355mnz44v0qv0g4840n.jpg” data-goodsid=”1″ data-price=”&yen;158″
                 data-name=”靴子1″ />
            </li>
            <li>
                <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201604/20/150355teg22qg1qznqqn8e.jpg” data-goodsid=”2″ data-price=”&yen;258″
                 data-name=”靴子2″ />
            </li>
            <li>
                <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201604/20/150355qmvwd5zgawfmf7w7.jpg” data-goodsid=”3″ data-price=”&yen;58″
                 data-name=”靴子3″ />
            </li>
            <li>
                <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201604/20/150355ayxoz3fzagzqp3ma.jpg” data-goodsid=”4″ data-price=”&yen;28″
                 data-name=”靴子4″ />
            </li>
        </ul>
        <div class=”shopping”>
            <div class=”shopping-list”>
                <ul id=”cartLi”></ul>
            </div>
            <div class=”shopping-cart”>
                <div class=”shopping-icon”>
                    <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201604/20/150356np944kwdasfaqhmf.png” />
                    <span id=”cartText”></span>
                </div>
                <div class=”shopping-warn” id=”shopping-warn”>购物车空空的哦~~</div>
            </div>
        </div>
    </div>
    <script>
        var $ = function (selectors, obj) {
            return (obj || document).querySelector(selectors);
        };
        function Cart(card, liList, cartText, shoppingWarn) {
            this.liList = $(liList);
            this.cardId = $(card);
            this.cartText = $(cartText);
            this.shoppingWarn = $(shoppingWarn);
        }
        Cart.prototype = {
            constructor: Cart,
            add: function (id, name, price, src, allPrice) {
                var f = 1;
                for (var i = 0; i < this.cardId.children.length; i++) {
                    if (this.cardId.children[i].getAttribute(“data-goodsid”) == id) {
                        f = 0;
                        break;
                    }
                }
                if (!f) return;
                this.cardId.innerHTML += ‘<li data-goodsid=”‘ + id + ‘”>’ +
                    ‘<img src = “‘ + src + ‘” />’ +
                    ‘<div class=”title”>’ + name + ‘</div>’ +
                    ‘<div class=”price”>’ + price + ‘</div>’ +
                    ‘<div class=”cart-num”>’ +
                    ‘<span class=”shop-l” id=”minus’ + id + ‘” data-price=”‘ + price + ‘”>-</span>’ +
                    ‘<input type=”text” value=”1件” id=”numId’ + id + ‘” />’ +
                    ‘<span class=”shop-r” id=”plus’ + id + ‘” data-price=”‘ + price + ‘”>+</span>’ +
                    ‘</div>’ +
                    ‘<div class=”total-price”>’ + allPrice + ‘</div>’ +
                    ‘<div class=”del”><img src=”http://cdn.attach.w3cfuns.com/notes/pics/201604/20/150355cv6nfn9y31z93n41.png” class=”del-btn”></div>’ +
                    ‘</li>’;
                var num = this.cardId.children.length;
                if (this.cardId.children.length > 0) {
                    this.cartText.style.display = “block”;
                }
                this.cartText.innerHTML = num;
                this.shoppingWarn.innerHTML = “购物车一共” + num + “个宝贝”;
            },
            remove: function (node) {
                this.cardId.removeChild(node);
                var num = this.cardId.children.length;
                this.cartText.innerHTML = num;
                this.shoppingWarn.innerHTML = “购物车一共” + num + “个宝贝”;
                if (this.cardId.children.length == “0”) {
                    this.cartText.style.display = “none”;
                    this.shoppingWarn.innerHTML = ‘购物车空空的哦~~’;
                }
            },
            minus: function (targetDom) {
                var input = targetDom;
                input.value = parseInt(input.value) – 1 + “件”;
                if (parseInt(input.value) < 1) {
                    input.value = 1 + “件”;
                }
            },
            plus: function (targetDom) {
                var input = targetDom;
                input.value = parseInt(input.value) + 1 + “件”;
            },
            init: function () {
                var that = this;
                //添加到购物车
                this.liList.onclick = function (e) {
                    e.preventDefault();
                    console.log(e.srcElement)
                    var target = e.srcElement ? e.srcElement : e.target;
                    var name = target.getAttribute(“data-name”),
                        price = target.getAttribute(“data-price”),
                        id = target.getAttribute(“data-goodsid”),
                        src = target.getAttribute(“src”),
                        allPrice = price.substr(1);
                    that.add(id, name, price, src, allPrice);
                };
                //
                this.cardId.onclick = function (e) {
                    e.preventDefault();
                    var target = e.srcElement ? e.srcElement : e.target;
                    //删除购物车列表
                    if (target.className == “del-btn”) {
                        that.remove(target.parentNode.parentNode);
                    }
                    //减少数量
                    if (target.className == “shop-l”) {
                        var input = target.nextSibling;
                        that.minus(input);
                        var priceN = input.value,
                            subInp = priceN.substr(0, 1),
                            priceSig = target.getAttribute(“data-price”),
                            subPri = priceSig.substr(1),
                            priceAll = subPri * subInp;
                        target.parentNode.nextSibling.innerHTML = priceAll;
                    }
                    //增加数量
                    if (target.className == “shop-r”) {
                        var input = target.previousSibling;
                        that.plus(input);
                        var priceN = input.value,
                            subInp = priceN.substr(0, 1),
                            priceSig = target.getAttribute(“data-price”),
                            subPri = priceSig.substr(1),
                            priceAll = subPri * subInp;
                        target.parentNode.nextSibling.innerHTML = priceAll; //总价
                    }
                };
            }
        };
        var cart = new Cart(“#cartLi”, “#liList”, “#cartText”, “#shopping-warn”);
        cart.init();
    </script>
</body>
</html>

前端开发必知道的网站|网站前端开发公众号|网站开发后台前端数据库

» 本文来自：前端开发者 » 《前端开发网站案例_js实现购物车效果》
» 本文链接地址：https://www.rokub.com/5002.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论