简单的购物车效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>购物车</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body> <div class="container"> <h2 style="text-align: center;">购物车</h2> <!-- 内容部分 --> <div class="main"> <ul> <li> <!-- 选择部分 --> <label> <input type="checkbox" name="" id=""> </label> <!-- 产品 --> <div class="cp"> <img src="img/timg.jpg"> </div> <!-- 价格 --> <div class="cp-price"> <span>32</span> <span class="nummoneys" hidden="hidden">32</span> </div> <!-- 数量加减 --> <div class="num"> <div class="sub">-</div> <input type="number" name="" id="" value="1"> <div class="add">+</div> </div> </li> <li> <!-- 选择部分 --> <label> <input type="checkbox" name="" id=""> </label> <!-- 产品 --> <div class="cp"> <img src="img/timg.jpg"> </div> <!-- 价格 --> <div class="cp-price"> <span>45</span> <span class="nummoneys" hidden="hidden">45</span> </div> <!-- 数量加减 --> <div class="num"> <div class="sub">-</div> <input type="number" name="" id="" value="1"> <div class="add">+</div> </div> </li> </ul> </div> <!-- 结算部分 --> <div class="footer"> <!-- 全选 --> <div class="select-all"> <label> <input type="checkbox" /> <span>全选</span> </label> </div> <div class="left"> <div> <font>总件数：</font> <span class="nums">0</span> <font>件</font> </div> <div> <font>总价：</font> <span class="moneys">￥0</span> </div> </div> </div> </div> </body> <script src="js/jquery-2.1.0.js"></script> <script src="js/index.js"></script> </html>
/* css样式 */
* { margin: 0; padding: 0; list-style: none; } .container { width: 400px; height: 500px; border: 1px solid red; margin: 0 auto; } .container ul li { border-bottom: 1px solid #666; display: flex; align-items: center; } .container ul li .cp { width: 80px; height: 80px; } .container ul li .cp img { width: 100%; height: 100%; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; } /* 数量部分 */ .num { padding-left: 20px; } .num div { width: 20px; height: 20px; border: 1px solid #ccc; line-height: 20px; text-align: center; cursor: pointer; user-select: none; } .num input { width: 22px; box-sizing: border-box; text-align: center; } /* 结算部分 */ .left span { display: inline-block; width: 10%; text-align: center; }
// jQuery $(function(){ // 全选按钮 $(".select-all input").change(function(){ // 将所有的单选按钮选中 $("li label input").prop("checked",$(this).prop("checked")); numPrice() }); // 单选按钮 $("li label input").change(function(){ // 获取单选框的个数 var numInput=$("li label input").length; //获取被点击后复选框的个数 var selInput=$("li label input:checked").length; // 判断点击个数是否等于总个数 if(numInput==selInput){ $(".select-all input").prop("checked",true); }else{ $(".select-all input").prop("checked",false); } numPrice() }); // 价格及数量的计算 function numPrice(){ // 定义变量存放单个商品数量 var numBox=$(".num input"); // 定义变量存放价格和商品总数量 var money=0; var num=0; for (var i = 0; i < numBox.length; i++) { if(numBox.eq(i).parents("li").find("label input").get(0).checked){ // 商品件数 num+=parseInt(numBox.eq(i).val()); // 商品价格 money+=parseFloat(numBox.eq(i).parents("li").find(".cp-price .nummoneys").text()); } } // 更换结算部分 $(".nums").text(num); $(".moneys").text(money); } // 加商品个数 $(".add").click(function(){ //获取商品个数 var addnum=parseInt($(this).parents("li").find(".num input").val()); $(this).prev().val(addnum+=1); //计算该商品的总价格 var nummoneys=parseFloat($(this).parents("li").find(".cp-price span:first-child").text()); // 替换原价格 $(this).parents("li").find(".cp-price .nummoneys").text(addnum*nummoneys); numPrice() }); // 减个数 $(".sub").click(function(){ //获取商品个数 var addnum=parseInt($(this).parents("li").find(".num input").val()); if(addnum<=1){ addnum=1; return false; } $(this).next().val(addnum-=1); //计算该商品的总价格 var nummoneys=parseFloat($(this).parents("li").find(".cp-price span:first-child").text()); // 替换原价格 $(this).parents("li").find(".cp-price .nummoneys").text(addnum*nummoneys); numPrice() }); // 手动改变数量 $("li .num input").blur(function(){ //获取商品个数 var addnum=parseInt($(this).parents("li").find(".num input").val()); if(addnum<=1){ addnum=1; $(this).val(addnum) } $(this).next().val(addnum-=1); //计算该商品的总价格 var nummoneys=parseFloat($(this).parents("li").find(".cp-price span:first-child").text()); // 替换原价格 $(this).parents("li").find(".cp-price .nummoneys").text(addnum*nummoneys); numPrice() }); });