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

<!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>

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

猜你喜欢