JS实现购物车功能

最新推荐文章于 2023-06-30 21:55:03 发布

Hercule2016

最新推荐文章于 2023-06-30 21:55:03 发布

阅读量991

点赞数 1

分类专栏： JS 文章标签： js javascript

本文链接：https://blog.csdn.net/cdut2016/article/details/106841606

版权

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

因为接下来是三个实操项目所以文字叙述会很少。我所张贴出来的代码全是可以粘贴到IDE上面运行的。所以如果照着写有错，请全部粘贴过去运行，亦或是在博客下方留言。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的购物车</title>
</head>
<body>
<div id = "showGoods"></div>
<div id = "showCart"></div>

<script>
    //购物车
    //购物车在正常情况下 这个商品的信息应该是从服务器获取的
    var goods = [
        {gid:1,name:"杠铃杆",price:2000},
        {gid:2,name:"红色杠铃片",price:1800},
        {gid:3,name:"卧推凳",price:600},
        {gid:4,name:"框式深蹲架",price:3600},
        {gid:5,name:"硬拉台",price:4500}
    ];
   //购物车数据
    var carts = [
        {goods:{gid:1,name:"杠铃杆",price:2000},count:1}
    ];
     //先显示商品
    function  showGoods() {
        var showGoods = document.getElementById("showGoods");
        for(var index in goods){
            //创建一个单独的div
            var div = document.createElement("div");
            showGoods.appendChild(div);

            //显示商品名字
            var span = document.createElement("span");
            div.appendChild(span);
            span.innerHTML = goods[index].name+"&nbsp;&nbsp;&nbsp;&nbsp;";

            //显示商品的价格
            var span2 = document.createElement("span");
            div.appendChild(span2);
            span2.innerHTML = goods[index].price + "&nbsp;&nbsp;&nbsp;&nbsp;";

            //加入购物车的按钮
            var addCart = document.createElement("input");
            div.appendChild(addCart);
            addCart.type = "button";
            addCart.value = "加入购物车";
            addCart.indexNum = index;
            addCart.onclick = function () {
                var g = goods[this.indexNum];
                var c = checkGoods(g);
                if(c){
                    c.count = c.count+1;
                }else {
                    var c = {goods:g,count:1};
                    carts.push(c);
                }
                //刷新购物车
                showCart();
            }

        }
    }

    /**
     * 判断购物车中是否拥有这件商品
     */
    function checkGoods (g){
        for(var index in carts){
            var goods = carts[index].goods;
            if(goods.gid == g.gid){//购物车有这件商品
                return carts[index];
            }
        }
        return false;
    }

    /**
     * 显示购物车
     */
    function  showCart() {
        var showCart = document.getElementById("showCart");
        showCart.innerHTML = "";
        for(var index in carts){
            //创建一个单独的div
            var div = document.createElement("div");
            showCart.appendChild(div);

            //显示商品名字
            var span = document.createElement("span");
            div.appendChild(span);
            span.innerHTML = carts[index].goods.name+"&nbsp;&nbsp;&nbsp;&nbsp;";

            //显示商品的价格
            var span2 = document.createElement("span");
            div.appendChild(span2);
            span2.innerHTML = "单价"+carts[index].goods.price + "&nbsp;&nbsp;&nbsp;&nbsp;";



            //减少商品的按钮
            var reduce = document.createElement("input");
            div.appendChild(reduce);
            reduce.type = "button";
            reduce.value = "-";
            reduce.indexNum = index;
            reduce.onclick = function () {
                var c = carts[this.indexNum];
                if(c.count > 1){
                    c.count--;
                }else if(c.count == 1){
                    carts.splice(this.indexNum,1);
                }

                window.showCart();
            }



            //显示商品数量
            var span3 = document.createElement("span");
            div.appendChild(span3);
            span3.innerHTML = "数量"+carts[index].count + "&nbsp;&nbsp;&nbsp;&nbsp;";

            //增加商品的按钮
            var increase = document.createElement("input");
            div.appendChild(increase);
            increase.type = "button";
            increase.value = "+";
            increase.indexNum = index;
            increase.onclick = function () {
                var c = carts[this.indexNum];
                c.count++;
                window.showCart();
            }

            //显示商品总价
            var span4 = document.createElement("span");
            div.appendChild(span4);
            span4.innerHTML = "总价" + ( carts[index].goods.price*carts[index].count) + "&nbsp;&nbsp;&nbsp;&nbsp;";
        }
    }

    showGoods();
    showCart();
</script>

</body>
</html>