购物车js

最新推荐文章于 2024-11-04 23:25:00 发布

桃花邬

最新推荐文章于 2024-11-04 23:25:00 发布

阅读量66

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_57425554/article/details/120825782

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
       *{
           margin: 0;
           padding: 0;
       }
           table{
               text-align: center;
           }
           td{
               border: 0;
               width: 88px;
               /* border: 1px solid pink; */
           }
           .a{
               height: 50px;
           }
           button{
               border: 0;
               background-color: red;
               color: white;
           }
       </style>
   </head>
   <body>
   <table border="1" align="center">
           <tr>
               <td><img src="img/dd_logo.jpg" ></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td><button type="button" οnclick="window.close()" style="border-radius:6px; width: 40px;">关闭</button></td>
           </tr>
           <tr>
               <td><input type="checkbox" οnchange="selectAllGoods()"/>全选</td>
               <td><span>商品图片</span></td>
               <td><span>商品信息</span></td>
               <td><span>单价</span></td>
               <td><span>数量</span></td>
               <td><span>金额</span></td>
               <td><span>操作</span></td>
           </tr>
           <tr>
               <td colspan="7"><hr style="border: 1px dashed lightgray;" /></td>
           </tr>
           <tr id="goods1">
               <td><input type="checkbox" οnchange="selectGoods()"/></td>
               <td><img src="img/dog.jpg" class="a"></td>
               <td style="width: 160px;"><span>我和狗狗活下来了</span></td>
               <td><span>￥21.9</span></td>
               <td>
                   <table cellspacing="0">
                       <tr>
                           <td style="width: 15px; height:15px; border: 1px solid black;">
                               <input type="button" value="-" style="width: 100%; height: 100%;border: none;" οnclick="sub1()"/>
                           </td>
                           <td style="border-top: 1px solid black; border-bottom: 1px solid black ; width:50px; height:15px;">
                               <span style="width:40px" id="num1">1</span>
                           </td>
                           <td style="width: 15px; height:15px; border: 1px solid black;">
                               <input type="button" value="+" style="width: 100%; height: 100%;border: none;" οnclick="add1()"/>
                           </td>
                       </tr>
                   </table>
               </td>
               <td><span>21.9</span></td>
               <td>
                   <span>移入收藏</span>
                   <br>
                   <span οnclick="del1()">删除</span>
               </td>
           </tr>
           <tr>
               <td colspan="7"><hr style="border: 1px dashed lightgray;" /></td>
           </tr>
           <tr id="goods2">
               <td><input type="checkbox" οnchange="selectGoods()"/></td>
               <td><img src="img/mai.jpg" class="a"></td>
               <td><span>灰霾来了怎么办</span></td>
               <td><span>￥24</span></td>
               <td>
                   <table cellspacing="0">
                       <tr>
                           <td style="width: 15px; height:15px; border: 1px solid black;">
                               <input type="button" value="-" style="width: 100%; height: 100%;border: none;" οnclick="sub2()"/>
                           </td>
                           <td style="border-top: 1px solid black; border-bottom: 1px solid black ; width:50px; height:15px;">
                               <span style="width:40px" id="num2">1</span>
                           </td>
                           <td style="width: 15px; height:15px; border: 1px solid black;" οnclick="add2()">
                               <input type="button" value="+" style="width: 100%; height: 100%;border: none;"/>
                           </td>
                       </tr>
                   </table>
               </td>
               <td><span>24</span></td>
               <td>
                   <span>移入收藏</span>
                   <br>
                   <span οnclick="del2()">删除</span>
               </td>
           </tr>
           <tr>
               <td colspan="7"><hr style="border: 1px dashed lightgray;" /></td>
           </tr>
           <tr>
               <td colspan="6">
                   <div>
                       商品总计：
                       <span style="color: red;" id="total">￥45.9</span>
                   </div>
               </td>
               <td><button type="button" οnclick="" style="width: 56px; height: 30px;">结算</button></td>
           </tr>
       </table>
       <script type="text/javascript">
       var number1=1;
           var number2=1;
           var select1=document.getElementsByTagName("tr")[3].firstElementChild.firstElementChild;
           var select2=document.getElementsByTagName("tr")[6].firstElementChild.firstElementChild;
           var selectAll=document.getElementsByTagName("tr")[1].firstElementChild.firstElementChild;
           var total=document.getElementById("total");
           var goods1=document.getElementById("goods1");
           var goods2=document.getElementById("goods2");
           // var number=document.getElementById("num1");
           function selectAllGoods(){
               select1.checked=selectAll.checked;
               select2.checked=selectAll.checked;
           }
           function selectGoods(){
               if(select1.checked==true&&select2.checked==true)
               selectAll.checked=true;
               else selectAll.checked=false;
           }
           function add1(){
               var text=document.getElementById("num1");
               number1+=1;
               text.innerHTML=number1;
               totalPrice()
               // console.log(number);
           }
           function sub1(){
               var text=document.getElementById("num1");
               number1-=1;
               if(number1<=0){
                   number1=1;
                   alert("该宝贝不能减少了哦！亲")
                   return false;
               }
               text.innerHTML=number1;
               totalPrice()
           }
           function add2(){
               var text=document.getElementById("num2");
               number2+=1;
               text.innerHTML=number2;
               totalPrice()
           }
           function sub2(){
               var text=document.getElementById("num2");
               number2-=1;
               if(number2<=0){
                   number2=1;
                   alert("该宝贝不能减少了哦！亲")
                   return false;
               }
               text.innerHTML=number2;
               totalPrice()
           }
           function totalPrice(){
               if(document.getElementById("goods1")==null&&document.getElementById("goods2")==null){
                   total.innerHTML="￥"+0.00;
               }
               if(document.getElementById("goods1")!=null&&document.getElementById("goods2")!=null){
                   var sum=parseFloat(21.9*number1+24*number2).toFixed(1);
                   total.innerHTML="￥"+sum;
               }
               if(document.getElementById("goods1")!=null&&document.getElementById("goods2")==null){
                   var sum=parseFloat(21.9*number1).toFixed(1);
                   total.innerHTML="￥"+sum;
               }
               if(document.getElementById("goods2")!=null&&document.getElementById("goods1")==null){
                   var sum=parseFloat(24*number2).toFixed(1);
                   total.innerHTML="￥"+sum;
               }
           }
           function del1(){
               goods1.remove();
               totalPrice();
           }
           function del2(){
               goods2.remove();
               totalPrice();
           }
           // console.log(number.innerHTML);
           // console.log(selectAll);

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