Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

jQuery开发购物车功能实现完整代码

前面章节我们创建了简单的购物车页面，

介绍了引用外部jQuery 库和外部的javascript文件

本节将完整的展示购物车的代码，实现完整的功能。

首先我们可以把前面的css样式放到一个index.css文件中

<style>
*{margin:0px;padding:0px;border:0px; font-size:12px;color:#333; font-family:微软雅黑;}
ul li{ list-style:none}
a{ text-decoration:none;}
a:hover{ color:#e46432;}
body{margin:auto; overflow-x:hidden;}

/*****购物车*********/
.gwc{ width:96%;overflow:hidden;}
.gwc_tb1{ width:100%; border-top:5px solid #48b9e5; background:#d0e7fa; height:38px; margin-top:20px; overflow:hidden;}
.tb1_td1{ width:3%; text-align:center;}
.tb1_td3{ width:18%; text-align:center;}
.tb1_td4{ width:20%; text-align:center;}
.tb1_td5{ width:22%; text-align:center;}
.tb1_td6{ width:13%; text-align:center;}
.tb1_td7{ text-align:center;}

.gwc_tb2{ width:100%; margin-top:20px; background:#eef6ff; border:1px solid #e5e5e5; padding-top:20px; padding-bottom:20px;}
.tb2_td1{ width:6%; text-align:center;}
.tb2_td2{ width:13%; text-align:center;}
.tb2_td2 img{ width:96px; height:96px; border:2px solid #c9c6c7;}
.tb2_td3{ width:5%; text-align:center;}
.tb2_td3 a{ font-size:14px; line-height:22px;}

.gwc_tb3{ width:100%; border:1px solid #d2d2d2; background:#e7e7e7; height:46px; margin-top:20px; }
.gwc_tb3 tr td{font-size:14px;}
.tb3_td1{ width:13%; text-align:center;}
.tb3_td2{ width:100px;text-align:center;}
.tb3_td2 span{ color:#ff5500;font-size:14px; font-weight:bold; padding-left:5px; padding-right:5px; }
.tb3_td3{ width:220px;text-align:center;}
.tb3_td3 span{ font-size:18px; font-weight:bold;}
.tb3_td4{ width:110px;text-align:center;}
.jz2{ width:100px; height:46px; line-height:46px; text-align:center; font-size:18px; color:#fff; background:#ee0000; display:block; float:right;}
#jz1{font-size:18px;}
		
@media only screen and (min-width: 410px){
     div{
	margin: auto;
	}
} 
</style>

就可以使用link在<head>中引用index.css文件：

<link href="css/index.css" rel="stylesheet" type="text/css" />

下面展示完整购物车功能代码，这里我们直接把css样式代码贴入，以直观的体现效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>jQuery实现购物车功能</title>
   <style>
    *{margin:0px;padding:0px;border:0px; font-size:12px;color:#333; font-family:微软雅黑;}
    ul li{ list-style:none}
    a{ text-decoration:none;}
    a:hover{ color:#e46432;}
    body{margin:auto; overflow-x:hidden;}
    
    /*****购物车*********/
    .gwc{ width:96%;overflow:hidden;}
    .gwc_tb1{ width:100%; border-top:5px solid #48b9e5; background:#d0e7fa; height:38px; margin-top:20px; overflow:hidden;}
    .tb1_td1{ width:3%; text-align:center;}
    .tb1_td3{ width:18%; text-align:center;}
    .tb1_td4{ width:20%; text-align:center;}
    .tb1_td5{ width:22%; text-align:center;}
    .tb1_td6{ width:13%; text-align:center;}
    .tb1_td7{ text-align:center;}
    
    .gwc_tb2{ width:100%; margin-top:20px; background:#eef6ff; border:1px solid #e5e5e5; padding-top:20px; padding-bottom:20px;}
    .tb2_td1{ width:6%; text-align:center;}
    .tb2_td2{ width:13%; text-align:center;}
    .tb2_td2 img{ width:96px; height:96px; border:2px solid #c9c6c7;}
    .tb2_td3{ width:5%; text-align:center;}
    .tb2_td3 a{ font-size:14px; line-height:22px;}
    
    .gwc_tb3{ width:100%; border:1px solid #d2d2d2; background:#e7e7e7; height:46px; margin-top:20px; }
    .gwc_tb3 tr td{font-size:14px;}
    .tb3_td1{ width:13%; text-align:center;}
    .tb3_td2{ width:100px;text-align:center;}
    .tb3_td2 span{ color:#ff5500;font-size:14px; font-weight:bold; padding-left:5px; padding-right:5px; }
    .tb3_td3{ width:220px;text-align:center;}
    .tb3_td3 span{ font-size:18px; font-weight:bold;}
    .tb3_td4{ width:110px;text-align:center;}
    .jz2{ width:100px; height:46px; line-height:46px; text-align:center; font-size:18px; color:#fff; background:#ee0000; display:block; float:right;}
    #jz1{font-size:18px;}
    		
    @media only screen and (min-width: 410px){
         div{
    	margin: auto;
    	}
    } 
   </style>
   <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
   <script type="text/javascript" src="js/Calculation.js"></script>
   <script type="text/javascript">
      $(document).ready(function () {
         //jquery特效制作复选框全选反选取消(无插件)
         // 全选
         $(".allselect").click(function () {
            if(this.checked){
               $(".gwc_tb2 input[name=newslist]").prop("checked",true);
            } else{
               $(".gwc_tb2 input[name=newslist]").prop("checked",false);
               $(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" });
            }
            GetCount();
         });

         //反选
         $("#invert").click(function () {
            $(".gwc_tb2 input[name=newslist]").each(function () {
               if ($(this).prop("checked")) {
                  $(this).prop("checked", false);
                  $(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
               } else {
                  $(this).prop("checked", true);
                  $(this).next().css({ "background-color": "#3366cc", "color": "#000000" });
               }
            });
            GetCount();
         });

         //取消
         $("#cancel").click(function () {
            $(".gwc_tb2 input[name=newslist]").each(function () {
               $(this).prop("checked", false);
               $(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
            });
            GetCount();
         });

         // 所有复选(:checkbox)框点击事件
         $(".gwc_tb2 input[name=newslist]").click(function () {
            if ($(this).prop("checked")) {
               $(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" });
            } else {
               $(this).next().css({ "background-color": "#ffffff", "color": "#000000" });
            }
         });

         // 输出
         $(".gwc_tb2 input[name=newslist]").click(function () {
            GetCount();           
         });
      });
      //获取数量
      function GetCount() {
         var conts = 0;
         var aa = 0;
         $(".gwc_tb2 input[name=newslist]").each(function () {
            if ($(this).prop("checked")) {
               for (var i = 0; i < $(this).length; i++) {
                  conts += parseInt($(this).val());
                  aa += 1;
               }
            }
         });
         $("#shuliang").text(aa);
         $("#zong1").html((conts).toFixed(2)); //toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
         $("#jz1").css("display", "none");
         $("#jz2").css("display", "block");
      }
   </script>
</head>
<body>
<div class="gwc" style=" margin:auto;">
   <table cellpadding="0" cellspacing="0" class="gwc_tb1">
      <tr>
         <td class="tb1_td1"><input id="Checkbox1" type="checkbox"  class="allselect"/></td>
         <td class="tb1_td1">全选</td>
         <td class="tb1_td3">商品</td>
         <td class="tb1_td4">商品信息</td>
         <td class="tb1_td5">数量</td>
         <td class="tb1_td6">单价</td>
         <td class="tb1_td7">操作</td>
      </tr>
   </table>

   <!---商品加减算总数---->
   <script type="text/javascript">
      $(function () {
         var t = $("#text_box1");
         $("#add1").click(function () {
            t.val(parseInt(t.val()) + 1);
            setTotal(); GetCount();
         });
         $("#min1").click(function () {
            if(parseInt(t.val() - 1) < 0){
               return false;
            }else {
               t.val(parseInt(t.val()) - 1);
            }
            setTotal(); GetCount();
         });
         function setTotal() {
            $("#total1").html((parseInt(t.val()) * 9).toFixed(2));
            $("#newslist-1").val(parseInt(t.val()) * 9);
         }
         setTotal();
      })
   </script>

   <table cellpadding="0" cellspacing="0" class="gwc_tb2" >
      <tr>
         <td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-1" /></td>
         <td class="tb2_td2"><a href="#"><img src="https://img.php.cn/upload/course/000/000/008/581c290d2a73a781.jpg"/></a></td>
         <td class="tb2_td3"><a href="#">产品标题</a></td>
         <td class="tb1_td4">产品介绍</td>
         <td class="tb1_td5">
            <input id="min1" name=""  style=" width:15px; height:18px;border:1px solid #ccc;" type="button" value="-" />
            <input id="text_box1" name="" type="text" value="1" style=" width:20px; text-align:center; border:1px solid #ccc;" />
            <input id="add1" name="" style=" width:15px; height:18px;border:1px solid #ccc;" type="button" value="+" />
         </td>
         <td class="tb1_td6"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
         <td class="tb1_td7"><a href="#">操作</a></td>
      </tr>
   </table>

   <!---商品加减算总数---->
   <script type="text/javascript">
      $(function () {
         var t = $("#text_box2");
         $("#add2").click(function () {
            t.val(parseInt(t.val()) + 1);
            setTotal(); GetCount();
         });
         $("#min2").click(function () {
            if(parseInt(t.val() - 1) < 0){
               return false;
            }else {
               t.val(parseInt(t.val()) - 1);
            }
            setTotal(); GetCount();
         });
         function setTotal() {
            $("#total2").html((parseInt(t.val()) * 8).toFixed(2));
            $("#newslist-2").val(parseInt(t.val()) * 8);
         }
         setTotal();
      })
   </script>
   <table cellpadding="0" cellspacing="0" class="gwc_tb2" >
      <tr>
         <td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-2" /></td>
         <td class="tb2_td2"><a href="#"><img src="https://img.php.cn/upload/course/000/000/008/581c294ad5abd805.jpg"/></a></td>
         <td class="tb2_td3"><a href="#">产品标题</a></td>
         <td class="tb1_td4">产品介绍</td>
         <td class="tb1_td5">
            <input id="min2" name=""  style=" width:15px; height:18px;border:1px solid #ccc;" type="button" value="-" />
            <input id="text_box2" name="" type="text" value="1" style=" width:20px; text-align:center; border:1px solid #ccc;" />
            <input id="add2" name="" style=" width:15px; height:18px;border:1px solid #ccc;" type="button" value="+" />
         </td>
         <td class="tb1_td6"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
         <td class="tb1_td7"><a href="#">操作</a></td>
      </tr>
   </table>

   <!---总数---->
   <script type="text/javascript">
      $(function () {
         $(".quanxun").click(function () {
            setTotal();
            //alert($(lens[0]).text());
         });
         function setTotal() {
            var len = $(".tot");
            var num = 0;
            for (var i = 0; i < len.length; i++) {
               num = parseInt(num) + parseInt($(len[i]).text());

            }
            //alert(len.length);
            $("#zong1").text(parseInt(num).toFixed(2));
            $("#shuliang").text(len.length);
         }
         //setTotal();
      })
   </script>
   <table cellpadding="0" cellspacing="0" class="gwc_tb3">
      <tr>
         <td class="tb1_td1"><input id="checkAll" class="allselect" type="checkbox" /></td>
         <td class="tb1_td1">全选</td>
         <td class="tb3_td1">
            <input id="invert" type="checkbox" />反选
            <input id="cancel" type="checkbox" />取消
         </td>
         <td class="tb3_td2">已选商品 <label id="shuliang" style="color:#ff5500;font-size:14px; font-weight:bold;">0</label> 件</td>
         <td class="tb3_td3">合计(不含运费):<span>￥</span><span style=" color:#ff5500;"><label id="zong1" style="color:#ff5500;font-size:14px; font-weight:bold;">0.00</label></span></td>
         <td class="tb3_td4"><span id="jz1">结算</span><a href="#" style=" display:none;"  class="jz2" id="jz2">结算</a></td>
      </tr>
   </table>

</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
   <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>


Weiter lernen
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现购物车功能</title> <style> *{margin:0px;padding:0px;border:0px; font-size:12px;color:#333; font-family:微软雅黑;} ul li{ list-style:none} a{ text-decoration:none;} a:hover{ color:#e46432;} body{margin:auto; overflow-x:hidden;} /*****购物车*********/ .gwc{ width:96%;overflow:hidden;} .gwc_tb1{ width:100%; border-top:5px solid #48b9e5; background:#d0e7fa; height:38px; margin-top:20px; overflow:hidden;} .tb1_td1{ width:3%; text-align:center;} .tb1_td3{ width:18%; text-align:center;} .tb1_td4{ width:20%; text-align:center;} .tb1_td5{ width:22%; text-align:center;} .tb1_td6{ width:13%; text-align:center;} .tb1_td7{ text-align:center;} .gwc_tb2{ width:100%; margin-top:20px; background:#eef6ff; border:1px solid #e5e5e5; padding-top:20px; padding-bottom:20px;} .tb2_td1{ width:6%; text-align:center;} .tb2_td2{ width:13%; text-align:center;} .tb2_td2 img{ width:96px; height:96px; border:2px solid #c9c6c7;} .tb2_td3{ width:5%; text-align:center;} .tb2_td3 a{ font-size:14px; line-height:22px;} .gwc_tb3{ width:100%; border:1px solid #d2d2d2; background:#e7e7e7; height:46px; margin-top:20px; } .gwc_tb3 tr td{font-size:14px;} .tb3_td1{ width:13%; text-align:center;} .tb3_td2{ width:100px;text-align:center;} .tb3_td2 span{ color:#ff5500;font-size:14px; font-weight:bold; padding-left:5px; padding-right:5px; } .tb3_td3{ width:220px;text-align:center;} .tb3_td3 span{ font-size:18px; font-weight:bold;} .tb3_td4{ width:110px;text-align:center;} .jz2{ width:100px; height:46px; line-height:46px; text-align:center; font-size:18px; color:#fff; background:#ee0000; display:block; float:right;} #jz1{font-size:18px;} @media only screen and (min-width: 410px){ div{ margin: auto; } } </style> <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript" src="js/Calculation.js"></script> <script type="text/javascript"> $(document).ready(function () { //jquery特效制作复选框全选反选取消(无插件) // 全选 $(".allselect").click(function () { if(this.checked){ $(".gwc_tb2 input[name=newslist]").prop("checked",true); } else{ $(".gwc_tb2 input[name=newslist]").prop("checked",false); $(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" }); } GetCount(); }); //反选 $("#invert").click(function () { $(".gwc_tb2 input[name=newslist]").each(function () { if ($(this).prop("checked")) { $(this).prop("checked", false); $(this).next().css({ "background-color": "#ffffff", "color": "#000000" }); } else { $(this).prop("checked", true); $(this).next().css({ "background-color": "#3366cc", "color": "#000000" }); } }); GetCount(); }); //取消 $("#cancel").click(function () { $(".gwc_tb2 input[name=newslist]").each(function () { $(this).prop("checked", false); $(this).next().css({ "background-color": "#ffffff", "color": "#000000" }); }); GetCount(); }); // 所有复选(:checkbox)框点击事件 $(".gwc_tb2 input[name=newslist]").click(function () { if ($(this).prop("checked")) { $(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" }); } else { $(this).next().css({ "background-color": "#ffffff", "color": "#000000" }); } }); // 输出 $(".gwc_tb2 input[name=newslist]").click(function () { GetCount(); }); }); //获取数量 function GetCount() { var conts = 0; var aa = 0; $(".gwc_tb2 input[name=newslist]").each(function () { if ($(this).prop("checked")) { for (var i = 0; i < $(this).length; i++) { conts += parseInt($(this).val()); aa += 1; } } }); $("#shuliang").text(aa); $("#zong1").html((conts).toFixed(2)); //toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。 $("#jz1").css("display", "none"); $("#jz2").css("display", "block"); } </script> </head> <body> <div class="gwc" style=" margin:auto;"> <table cellpadding="0" cellspacing="0" class="gwc_tb1"> <tr> <td class="tb1_td1"><input id="Checkbox1" type="checkbox" class="allselect"/></td> <td class="tb1_td1">全选</td> <td class="tb1_td3">商品</td> <td class="tb1_td4">商品信息</td> <td class="tb1_td5">数量</td> <td class="tb1_td6">单价</td> <td class="tb1_td7">操作</td> </tr> </table> <!---商品加减算总数----> <script type="text/javascript"> $(function () { var t = $("#text_box1"); $("#add1").click(function () { t.val(parseInt(t.val()) + 1); setTotal(); GetCount(); }); $("#min1").click(function () { if(parseInt(t.val() - 1) < 0){ return false; }else { t.val(parseInt(t.val()) - 1); } setTotal(); GetCount(); }); function setTotal() { $("#total1").html((parseInt(t.val()) * 9).toFixed(2)); $("#newslist-1").val(parseInt(t.val()) * 9); } setTotal(); }) </script> <table cellpadding="0" cellspacing="0" class="gwc_tb2" > <tr> <td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-1" /></td> <td class="tb2_td2"><a href="#"><img src="https://img.php.cn/upload/course/000/000/008/581c290d2a73a781.jpg"/></a></td> <td class="tb2_td3"><a href="#">产品标题</a></td> <td class="tb1_td4">产品介绍</td> <td class="tb1_td5"> <input id="min1" name="" style=" width:15px; height:18px;border:1px solid #ccc;" type="button" value="-" /> <input id="text_box1" name="" type="text" value="1" style=" width:20px; text-align:center; border:1px solid #ccc;" /> <input id="add1" name="" style=" width:15px; height:18px;border:1px solid #ccc;" type="button" value="+" /> </td> <td class="tb1_td6"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td> <td class="tb1_td7"><a href="#">操作</a></td> </tr> </table> <!---商品加减算总数----> <script type="text/javascript"> $(function () { var t = $("#text_box2"); $("#add2").click(function () { t.val(parseInt(t.val()) + 1); setTotal(); GetCount(); }); $("#min2").click(function () { if(parseInt(t.val() - 1) < 0){ return false; }else { t.val(parseInt(t.val()) - 1); } setTotal(); GetCount(); }); function setTotal() { $("#total2").html((parseInt(t.val()) * 8).toFixed(2)); $("#newslist-2").val(parseInt(t.val()) * 8); } setTotal(); }) </script> <table cellpadding="0" cellspacing="0" class="gwc_tb2" > <tr> <td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-2" /></td> <td class="tb2_td2"><a href="#"><img src="https://img.php.cn/upload/course/000/000/008/581c294ad5abd805.jpg"/></a></td> <td class="tb2_td3"><a href="#">产品标题</a></td> <td class="tb1_td4">产品介绍</td> <td class="tb1_td5"> <input id="min2" name="" style=" width:15px; height:18px;border:1px solid #ccc;" type="button" value="-" /> <input id="text_box2" name="" type="text" value="1" style=" width:20px; text-align:center; border:1px solid #ccc;" /> <input id="add2" name="" style=" width:15px; height:18px;border:1px solid #ccc;" type="button" value="+" /> </td> <td class="tb1_td6"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td> <td class="tb1_td7"><a href="#">操作</a></td> </tr> </table> <!---总数----> <script type="text/javascript"> $(function () { $(".quanxun").click(function () { setTotal(); //alert($(lens[0]).text()); }); function setTotal() { var len = $(".tot"); var num = 0; for (var i = 0; i < len.length; i++) { num = parseInt(num) + parseInt($(len[i]).text()); } //alert(len.length); $("#zong1").text(parseInt(num).toFixed(2)); $("#shuliang").text(len.length); } //setTotal(); }) </script> <table cellpadding="0" cellspacing="0" class="gwc_tb3"> <tr> <td class="tb1_td1"><input id="checkAll" class="allselect" type="checkbox" /></td> <td class="tb1_td1">全选</td> <td class="tb3_td1"> <input id="invert" type="checkbox" />反选 <input id="cancel" type="checkbox" />取消 </td> <td class="tb3_td2">已选商品 <label id="shuliang" style="color:#ff5500;font-size:14px; font-weight:bold;">0</label> 件</td> <td class="tb3_td3">合计(不含运费):<span>￥</span><span style=" color:#ff5500;"><label id="zong1" style="color:#ff5500;font-size:14px; font-weight:bold;">0.00</label></span></td> <td class="tb3_td4"><span id="jz1">结算</span><a href="#" style=" display:none;" class="jz2" id="jz2">结算</a></td> </tr> </table> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> </div> </body> </html>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492769 spielt ab