js购物车(判断了商品名称是否重复并且相邻的图片不重复)

卿本无忧

已于 2022-06-09 16:48:31 修改

阅读量1.5k

点赞数 1

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

于 2017-10-24 20:27:53 首次发布

本文链接：https://blog.csdn.net/qq_39998026/article/details/78334202

版权

javascript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

运行效果：

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    <center>
        <input type="button" id="addProTop" value="添加商品(顶部)" onclick="addPro(this)">
        <table border="1">
            <tr>
                <td>商品名称</td>
                <td>市场价</td>
                <td>购买数量</td>
                <td>小计</td>
                <td>操作</td>
            </tr>
        </table>
        <table border="1">
            <tr>
                <td>
                    购物车总价:￥0.0元
                </td>
                <td>
                    <input type="button" id="removeAll" value="清空购物车">
                </td>
            </tr>
        </table>
        <input type="button" id="addPro" value="添加商品(底部)" onclick="addPro(this)">
    </center>
        <script>
            //添加商品
            function addPro(btn){
                var goods_name=prompt('请输入商品名称:', '');

                 //判断商品名称是否重复
                 var flag=false;
                var table=document.getElementsByTagName('table')[0];
                for (var i = 1; i < table.rows.length; i++) {
                    var name=table.rows[i].cells[0].innerText;
                    console.log(name);
                    console.log(goods_name);
                    if(name==goods_name){
                        flag=true;
                    }
                }
                
                //判断商品名称是否为空
                if(goods_name.trim().length<=0){
                    alert('商品名称不能为空');
                }else if(flag){
                    alert('商品名重复！请重新添加！');
                }else{
                    var goods_price=prompt('请输入商品的市场价:', '');
                    //判断价格是否为空
                    if(goods_price.trim().length<=0){
                        alert('商品的市场价不能为空');
                    }else if(isNaN(goods_price)){
                        //判断价格是否为数字
                        alert('商品的价格为数字');
                    }else{
                        var table=document.getElementsByTagName('table')[0];
                        var flag1=(btn.id=='addProTop');
                        if(flag1){
                            var tr=table.insertRow(1);
                        }else{
                            var tr=table.insertRow();
                        }
                        
                        var imgIndex=parseInt(Math.random()*5)+1;
                        while(imgvalidate("pic"+imgIndex+".jpg",flag1)){
                            imgIndex=parseInt(Math.random()*5)+1;
                        }

                        var img='<img src=imgs/pic'+ imgIndex +'.jpg><br>';
                        tr.insertCell().innerHTML=img+goods_name;
                        tr.insertCell().innerHTML="￥"+goods_price;
                        tr.insertCell().innerHTML='<input type="text" value="1" onblur="doChange(this)">';
                        tr.insertCell().innerHTML="￥"+goods_price;
                        tr.insertCell().innerHTML='<button onclick="removePro(this)">删除</button>';
                    }    
                }
                sumPrice();
            }

            
            //判断图片是否重复
            function imgvalidate(img,flag,index){
                var tb1=document.getElementsByTagName('table')[0];
                var fl=false;
                if(tb1.rows.length>2){
                    if(flag){
                        fl=tb1.rows[2].cells[0].childNodes[0].src.split("imgs/")[1]==img;
                    }else{
                        fl=tb1.rows[tb1.rows.length].cells[0].childNodes[0].src.split("imgs/")[1]==img;
                    }
                }

                return fl;
            }
        
            function doChange(inp){
                if(inp.value<=0){
                    alert('商品数量必须大于1');
                    inp.value=1;
                }else if(inp.value%1!=0){
                    alert('商品数量必须为整数');
                    inp.value=1;
                }else{
                    var price=inp.parentNode.previousSibling.innerHTML.substring(1);
                    inp.parentNode.nextSibling.innerHTML="￥"+inp.value*price;
                }
                sumPrice();
            }

            //删除
            function removePro(btn){
                var tr = btn.parentNode.parentNode;
                    var table=document.getElementsByTagName('table')[0];
                   table.deleteRow(tr.rowIndex);
                   sumPrice();
            }

            //清空购物车
            document.getElementById('removeAll').onclick=function(){
                var table=document.getElementsByTagName('table')[0];
                for (var i = table.rows.length-1; i > 0; i--) {
                    table.deleteRow(i);
                }
                sumPrice();
            }

            //计算总价
            function sumPrice(){
                var table=document.getElementsByTagName('table')[0];
                var sum=0;
                for (var i = 1; i < table.rows.length; i++) {
                    sum+=Number(table.rows[i].cells[3].innerHTML.substring(1));
                }
                var tb=document.getElementsByTagName('table')[1];
                tb.rows[0].cells[0].innerHTML="购物车总价:￥"+sum+"元";
            }

        </script>
    </body>
</html>