js+html+css+jQuery实现简单购物车

2021/9/8 23:11:59

编程Tag： js jQuery function html var click parseInt cal

本文主要是介绍js+html+css+jQuery实现简单购物车，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

js+jquery
html+css

js+jquery

所需函数：
function cal（）：计算购物车里的价格，积分，数量等；
$(".add").click(function(){})：添加商品数量；
$(".sub").click(function(){})：减少商品数量；
$("#add").click(function(){})：添加新商品；
$(".del").click(function(){})：删除商品；
$("#control").click(function(){})：商品全选；

<script>
    	function cal(){
			//设置三个全局变量来接受总数量，总积分，总价格
    		var allnum = 0;
    		var allsorce = 0;
    		var allprice = 0;
    		
    		//通过类选择器拿到每一个商品数量框
    		$(".num").each(function(i,v){
				
    			var num = $(v).val();
    			var price = $(v).parent().prev().html();
				var all = parseInt(num)*parseInt(price);
				$(v).parent().next().html(all);
				
				allnum+=parseInt(num);
				allprice+=parseInt(all)
				
				var jf = $(v).parent().prev().prev().html();
				var alljf = parseInt(num)*parseInt(jf);
				
				allsorce+=parseInt(alljf);
				$("#allnum").html(allnum);
				$("#alljf").html(allsorce);
				$("#allmoney").html(allprice);
    		});	
    	}
    	$(function(){
    		cal();
			$(".add").click(function(){
				var n = $(this).prev().val();
				$(this).prev().val(parseInt(n)+1);
				cal();
			});
			
			$(".sub").click(function(){
				var n = $(this).next().val();
				if(n>1){
					$$(this).next().val(parseInt(n)-1);
					cal();
				}else{
					var bet = confirm("要删除吗？")
					if(bet){
						$(this).parents("tr").remove();
						cal();
					}
				}
				
			});
			
			$("#add").click(function(){
				var $newNode=$("table tr:eq(2)").clone(true);
				$("table tr:last").before($newNode);
				cal();
			});
			
			$(".del").click(function(){
				var bet = confirm("要删除吗？")
				if(bet){
					$(this).parents("tr").remove();
					cal();
				}
			});
			var flag = $("#control").val();
			$("#control").click(function(){
				if(flag){
					$("input[type='checkbox']").attr("checked","true");
					flag=false;
				}else{
					$("input[type='checkbox']").removeAttr("checked");
					flag=true;
				}
			});
    	});
    </script>

html+css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        table{
            width: 800px;
            margin: 0px auto;
            font-size: 12px;
            text-align: center;
        }
        td{
            padding: 10px;
            background-color: #E2F2FF;
        }
        .td_2 div{
            float: left;
        }
        .td_2 div:last-of-type{
            width: 260px;
            margin-left:5px;
        }
        .td_2 p{
            line-height: 20px;
            text-align: left;
        }
        .num{
            border: 1px solid powderblue;
            width: 20px;
            height: 20px;
            text-align: center;
        }
        .sub,.add{
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
<input type="button" οnclick="cal();" value="aa"/>
<table>
    <tr>
        <td><input type="checkbox" id="control"/>全选</td>
        <td>店铺宝贝</td><td>获积分</td><td>单价(元)</td>
        <td>数量</td><td>小计(元)</td><td>操作  <input type="button" id="add" value="添加"/></td>
    </tr>
    <tr id="pro1">
        <td class="td_1"><input type="checkbox" /></td>
        <td class="td_2">
            <div><img src="images/taobao_cart_01.jpg"></div>
            <div>
                <p><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a></p>
                <p>颜色：棕色 尺码：37</p>
                <p>保障:<img src="images/taobao_icon_01.jpg"> </p>
            </div>
        </td>
        <td class="td_3">5</td>
        <td class="td_4">138</td>
        <td class="td_5">
            <input type="button" value="-" class="sub"/>
            <input type="text" value="1" class="num" />
            <input type="button" value="+" class="add"/>
        </td>
        <td class="td_6">
        </td>
        <td class="td_7">
            <a href="#" class="del">删除</a>
        </td>
    </tr>
    <tr id="pro2">
        <td class="td_1"><input type="checkbox" /></td>
        <td class="td_2">
            <div><img src="images/taobao_cart_02.jpg"></div>
            <div>
                <p><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a></p>

                <p>保障:<img src="images/taobao_icon_01.jpg"> </p>
            </div>
        </td>
        <td class="td_3">12</td>
        <td class="td_4">265</td>
        <td class="td_5">
            <input type="button" value="-" class="sub"/>
            <input type="text" value="1" class="num" />
            <input type="button" value="+" class="add"/>
        </td>
        <td class="td_6">
        </td>
        <td class="td_7">
            <a href="#" class="del">删除</a>
        </td>
    </tr>
    <tr id="pro3">
        <td class="td_1"><input type="checkbox" /></td>
        <td class="td_2">
            <div><img src="images/taobao_cart_03.jpg"></div>
            <div>
                <p><a href="#">蝶妆海?蓝清滢粉底液10#（象牙白）</a></p>

                <p>保障:<img src="images/taobao_icon_01.jpg">
                    <img src="images/taobao_icon_02.jpg"></p>
            </div>
        </td>
        <td class="td_3">3</td>
        <td class="td_4">85</td>
        <td class="td_5">
            <input type="button" value="-" class="sub"/>
            <input type="text" value="2" class="num" />
            <input type="button" value="+" class="add"/>
        </td>
        <td class="td_6">
        </td>
        <td class="td_7">
            <a href="#" class="del">删除</a>
        </td>
    </tr>
    <tr id="pro4">
        <td class="td_1"><input type="checkbox" /></td>
        <td class="td_2">
            <div><img src="images/taobao_cart_04.jpg"></div>
            <div>
                <p><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a></p>

                <p>保障:<img src="images/taobao_icon_01.jpg">
                    <img src="images/taobao_icon_02.jpg"></p>
            </div>
        </td>
        <td class="td_3">12</td>
        <td class="td_4">12</td>
        <td class="td_5">
            <input type="button" value="-" class="sub"/>
            <input type="text" value="5" class="num" />
            <input type="button" value="+" class="add"/>
        </td>
        <td class="td_6">
        </td>
        <td class="td_7">
            <a href="#" class="del">删除</a>
        </td>
    </tr>
    <tr id="all">
        <td colspan="7">
            总数量:<span id="allnum"></span>
            总积分:<span id="alljf"></span>
            总金额:<span id="allmoney"></span>
        </td>
    </tr>
</table>

</body>
</html>

效果图：
在这里插入图片描述

这篇关于js+html+css+jQuery实现简单购物车的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

js+html+css+jQuery实现简单购物车

文章目录

js+jquery

html+css

相关编程文章