第十五章购物车案例的完善和JSON对象

最新推荐文章于 2022-07-10 18:28:41 发布

百密一疏^^

最新推荐文章于 2022-07-10 18:28:41 发布

阅读量530

点赞数

分类专栏：前端学习文章标签： json 前端 javascript

本文链接：https://blog.csdn.net/m0_71674778/article/details/125371766

版权

前端学习专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1.知识练习

编写购物车的结构并能实现基本的添加商品的功能。

    <style>
        fieldset{
            margin: 0px auto;
            width: 800px;
        }
        table{
            border: 1px solid black;
            width: 750px;
            margin: 0px auto;
            border-collapse: collapse;
        }
        td{
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>商品信息</legend>
        <form action="">
            商品名:
            <input type="text" id="goodsName"/>
            单价：
            <input type="text" name="" id="goodsPrice">
            数量：
            <input type="text" name="" id="goodsQuantity">
            <input type="button" id="addGoods" value="添加">
        </form>
    </fieldset>
    <fieldset>
        <legend>购物车</legend>
        <table>
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">全选
                    </td>
                    <td>品名</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>
                        删除
                    </td>
                </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
        </table>
    </fieldset>
    <script>
        addGoods.onclick=function(){
            var tds="";
            tds+="<td><input type='checkbox'></input></td>";
            tds+="<td>"+goodsName.value+"</td>";
            tds+="<td>"+goodsPrice.value+"</td>";
            tds+="<td>"+
                    "<input type='button' value='+'>"+
                    "<input type='text' value="+goodsQuantity.value+">"+
                    "<input type='button' value='-'>"
                 "</td>";
            tds+="<td>"+Number(goodsPrice.value)*Number(goodsQuantity.value)+"</td>";
            tds+="<td><input type='button' value='删除'></td>";

            var trobj = document.createElement("tr");
            trobj.innerHTML=tds;
            //alert(trobj.innerHTML);
            
            // var tbody=document.querySelector("#tBody")
            tbody.appendChild(trobj);
        }
    </script>
</body>

2.购物车具体功能的完善

2.1 添加商品并判重

①先查看购物车中，是否已经存在要添加的商品；

②如果存在，则做数量累加，不添加新商品行；

③如果不存在，则做之前的流程，添加新商品行。

//判断有没有已经加入购物车的物品
        function goodsRepeat(){
            //获取所有的商品名所在的单元格
            var goodsname = document.querySelectorAll(".goodsname");
            //alert(goodsname[0]);
            var flag = false;
            
            for(var i=0;i<goodsname.length;i++){
                //遍历查找当前行中的商品和要添加的商品是否重复
                if(goodsname[i].innerText==goodsName.value){
                    flag = true;
                    break;
                }
            }
            //alert(flag); 
            if(flag){
                //alert(goodsname[i].parentElement.children[3]);
                //发现重复 先获取商品数量的文本框
                var goodsquantity=goodsname[i].parentElement.children[3].children[1];
                //alert(goodsquantity.value);
                //将文本框的值加上要添加的商品数量        goodsquantity.value=Number(goodsquantity.value)+Number(goodsQuantity.value);
                //小计
                subTotal(goodsquantity);
                //计算总价+单选框触发事件
                goodschecked();
            }else if(goodsQuantity.value!=0){
                //增加的商品数量不为0后 将td字符串设置到tr中，再将tr添加到tbody中
                var trobj = document.createElement("tr");       

                var tds = tdTemp.innerHTML;
                //js写的的模板
                tds = tds.replace("{goodsquantity}",Number(goodsQuantity.value))
                         .replace("{goodsname}",goodsName.value)
                         .replace("{goodsprice}",Number(goodsPrice.value))
                         .replace("{goodsprice}*{goodsquantity}",Number(goodsPrice.value)*Number(goodsQuantity.value))
                //alert(tds);
                trobj.innerHTML=tds;
                tbody.appendChild(trobj);
                allCheck(all);
            }else{
                alert("数量不能为0");
            } 
        }

js字符串模板的使用:一般部分按正常的方式写，需要替换部分做标记(命名时最好使用{}括起来防止重名);

    <script type="text/html" id="tdTemp">
        <td>
            <input type="checkbox" class="ckgoods" onclick="goodschecked(this)"/>
        </td>
        <td class="goodsname">
            {goodsname}
        </td>
        <td>
            {goodsprice}
        </td>
        <td>
            <input type="button" value="+" onclick="changeQty(this)"/>
            <input type="text" value="{goodsquantity}" onblur="changeQty(this)"/>
            <input type="button" value="-" onclick="changeQty(this)"/>
        </td>
        <td class="subtot">
                {goodsprice}*{goodsquantity}
        </td>
        <td>
            <input type="button" value="删除" onclick="confirm('确定要删除吗？')?goodsDelete(this):void(0)"/>
        </td>
    </script>

2.2 通过+，-，或者文本框修改商品数量

①点击加号数量加1

②点击减号数量减去1，当数量变为0的时候，记录自动删除

③直接修改文本框中的数量，做校验,针对非数值做校验

⑤修改完数量之后，要计算小计

⑥修改数量之后，要汇总总计

function changeQty(change){
            var quantity = Number(change.parentElement.children[1].value);
            if(change.value=="-"&&quantity>1){
                change.previousElementSibling.value--;
            }
            else if(change.value=="-"&&quantity==1){
                goodsDelete(change.parentElement.parentElement.lastElementChild.firstElementChild);
            }
            else if(change.value=="+"){
                change.nextElementSibling.value++;
            }
            else if(change.type=="text"&&isNaN(quantity)){
                    alert("不是数字请重新输入");
                    //通过小计和单价 将数量还原
                    change.parentElement.children[1].value=change.parentElement.nextElementSibling.innerText/change.parentElement.previousElementSibling.innerText;
            }
            else if(change.type=="text"&&change.value==0){
                goodsDelete(change.parentElement.parentElement.lastElementChild.firstElementChild);
            }
            subTotal(change);
            goodschecked();
        }

2.3 计算小计

function subTotal(site){
            var goodsPrice = Number(site.parentElement.previousElementSibling.innerText);
            var goodsQuantity = Number(site.parentElement.children[1].value);
            site.parentElement.nextElementSibling.innerText=goodsPrice*goodsQuantity;
        }

2.4 计算总价+单选框的触发事件

function goodschecked(){
            var goodscheck = document.querySelectorAll(".ckgoods");
            var subtot = document.querySelectorAll(".subtot");
            var tot = 0;
            var n=0;
            //对所有选中的单选框所对应的小计求和
            for(var i = 0;i<goodscheck.length;i++){
                if(goodscheck[i].checked==true){
                    tot +=Number(subtot[i].innerText);
                    n++;
                }
            }
            //判断单选框是否全部选中
            if(n==goodscheck.length){
                all.checked=true;
            }else{
                all.checked=false;
            }
            //alert(tot);
            total.innerText=tot+"元";
        }

2.5 全选框

function allCheck(allCheck){
            var ckgoods = document.querySelectorAll(".ckgoods");
            //alert(allCheck.checked);
            if(allCheck.checked==true){
                //allCheck.checked=true;
                for(var i=0;i<ckgoods.length;i++){
                    ckgoods[i].checked=true;
                    goodschecked();
                }
            }else{
                for(var i=0;i<ckgoods.length;i++){
                    ckgoods[i].checked=false;
                    goodschecked();
                }
            }
        }

2.6 删除按钮

function goodsDelete(thisinput){
            //alert(thisinput.value);
            thisinput.parentElement.parentElement.remove();
            
            goodschecked();

        }

3. JSON对象

3.1 js对象

js对象语法:

{

属性1：数据1，

属性2：数据2，

属性3：数据3，

...

方法名:function(){

//函数体

}

}

js对象的特点：

①js对象的属性不用加双引号

②js对象中可以有函数

③可以通过 . 访问属性，或属性下标访问属性

//js对象
        var stu = {
            name:"张三",
            age: 20,
            tall:1.7,
            sex:"男",
            introduce:function(){
                alert(this.name+this.age);
            }
        }
        // alert(typeof stu);
        // alert(stu.name);
        // stu.introduce();

3.2 json对象语法

{

“属性1”：数据1，

“属性2”：数据2，

“属性3”：数据3，

...

“属性4”：数据4

}

json对象的特点:

①属性名都要用双引号括起来，必须是双引号，不能用单引号，

②json对象中不能定义函数，主要作用就是传递数据，

③可以通过 . 访问属性，或属性下标访问属性。

var people = {
            "name":"whc",
            "age" : 20 ,
            "sex" : "女"
        }
        // alert(people.name);
        // alert(people["age"]);
        //alert(typeof people);

3.3 json格式字符串

’{“属性1”：数据1，“属性2”：数据2}‘

特点：

①数据本身是字符串类型的数据；

②字符串的内容符合json格式；

③如果要访问其中的属性数据，需要转为json对象。

将json字符串转为json对象

JSON.parse(json字符串)

将json对象转为json字符串

JSON.stringify(json对象)

var car = '{"brand":"宝马","price":200}';
        //alert(car);
        var obj = JSON.parse(car);
        //alert(typeof JSON.stringify(obj));