前端实战——实现购物车功能

其他 2020-02-14 09:30:31 阅读次数: 0

文章目录

天猫实战——实现最全购物车功能

学习了一段时间前端，掌握了一些基本技能，只有进行实践操作，才能将自己学到的充分掌握。首页等一系列代码已经开源到github。
地址：https://github.com/qiaoj-ka
以下是对于购物车页面，以及一些交互。

页面展示

在这里插入图片描述
这是我完成之后的页面。

更多代码请在github上查看。https://github.com/qiaoj-ka

核心代码块

置顶导航

置顶导航使用纯CSS和HTML做的以及部分BootStrap。

       <!--	置顶导航-->
		<nav  class="top">
		<a href="#nowhere">
			<span class="glyphicon glyphicon-home redColor"></span>
			天猫首页
		</a>
		
		<span>瞄，欢迎来天猫</span>
		 	<a href="file:///C:/Users/%E8%A5%BF%E7%93%9C/Workspaces/MyEclipse%20CI/Tmall/TmallLogin.html">请登录</a>
			<a href="#nowhere">免费注册</a>
		
		<span class="pull-right">
			<a href="#nowhere">我的订单</a>
			<a href="file:///C:/Users/%E8%A5%BF%E7%93%9C/Workspaces/MyEclipse%20CI/Tmall/ShoppingCart.html">
			<span class=" glyphicon glyphicon-shopping-cart redColor" ></span>
            购物车<strong>2</strong>件</a>    
		</span>
	</nav>
	  <!--	CSS样式-->
<style>
	nav.top{
		background-color: #f2f2f2;
		padding-top: 5px;
		padding-bottom: 5px;
		border-bottom:1px solid  #e7e7e7;
	}
	nav.top span, nav.top a{
		color: #999;
		margin: 0px 10px 0px 10px;
	}
	nav.top a:hover{
		color: #C40000;
		text-decoration: none;
	}
</style>

产品列表

HTML部分

  <div class="cartTitle pull-right">
        <span>已选商品  (不含运费)</span>
        <span id="cartTitlePrice" class="cartTitlePrice">￥0.00</span>
        <button class="createOrderButton" style="background-color: rgb(170, 170, 170);" disabled="disabled">结 算</button>
    </div>
    <div class="cartProductList">
        <table class="cartProductTable">
            <thead>
                <tr>
                    <th class="selectAndImage">
                            <img src="http://how2j.cn/tmall/img/site/cartNotSelected.png" class="selectAllItem" selectit="false">                
                    全选
                    </th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th width="120px">金额</th>
                    <th class="operation">操作</th>
                </tr>
            </thead>
            <tbody>
				
				<tr >
						<td>
							<div class="shopId"><img src="http://how2j.cn/tmall/img/site/cartNotSelected.png" class="selectAllItem" selectit="false">       
                    	<img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1919701784.jpg" width="30" height="20">
							 <a href="#nowhere">店铺：华为官方旗舰店</a>
								
							</div>
						</td>
				</tr>
						
                    <tr class="cartProductItemTR" oiid="936">
                        <td>
                            <img src="http://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="936" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="http://how2j.cn/tmall/img/site/cartSelected.png"></a>
                            <img src="https://img.alicdn.com/bao/uploaded/i4/TB1yVcUNQPoK1RjSZKbytX1IXXa_112407.jpg_80x80.jpg" class="cartProductImg">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a class="cartProductLink" href="#nowhere">【12期免息】Huawei/华为P30 Pro曲面屏超感光徕卡四摄变焦双景录像980智能手机</a>
								<div>
									<img src="https://gw.alicdn.com/tfs/TB1XY8mheH2gK0jSZFEXXcqMpXa-63-16.png">
								</div>
                                <div class="cartProductLinkInnerDiv">
                                    <img title="支持信用卡支付" src="http://how2j.cn/tmall/img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="http://how2j.cn/tmall/img/site/promise.png">
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="cartProductItemPromotionPrice">￥4988.00</span>
                        </td>
                        <td>
                            <div class="cartProductChangeNumberDiv">
                                <span pid="365" class="hidden orderItemStock ">75</span>
                                <span pid="365" class="hidden orderItemPromotePrice ">5306.0</span>
                                <a href="#nowhere" class="numberMinus" pid="365">-</a>
                                <input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="936" pid="365">
                                <a href="#nowhere" class="numberPlus" pid="365" stock="75">+</a>
                            </div>                    
                         </td>
                        <td>
                            <span pid="365" oiid="936" id="cartProductItemSmallSumPrice" class="cartProductItemSmallSumPrice">
                            ￥4988.00
                            </span>
                        </td>
                        <td>
                            <a href="#nowhere" oiid="936" class="deleteOrderItem">删除</a>
                        </td>
                    </tr>
                    <tr class="cartProductItemTR" oiid="935" style="background-color: rgb(255, 255, 255);">
                        <td>
                            <img src="http://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="935" selectit="false">
                            <a href="#nowhere" style="display:none"><img src="http://how2j.cn/tmall/img/site/cartSelected.png"></a>
                            <img src="https://img.alicdn.com/bao/uploaded/i2/279470743/O1CN01UTTklQ1HMKmu9Xpuw_!!0-item_pic.jpg_80x80.jpg" class="cartProductImg">
                        </td>
                        <td>
                            <div class="cartProductLinkOutDiv">
                                <a class="cartProductLink" href="#nowhere">正版 C++游戏编程入门(第4版)c++游戏编程语言c语言编程教程 c++游戏编程从入门到精通 程序设计教材 计算机教材</a>
                                <div class="cartProductLinkInnerDiv">
                                    <img title="支持信用卡支付" src="http://how2j.cn/tmall/img/site/creditcard.png">
                                    <img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png">
                                    <img title="消费者保障服务,承诺如实描述" src="http://how2j.cn/tmall/img/site/promise.png">
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="cartProductItemOringalPrice">￥59.48</span>
                            <span class="cartProductItemPromotionPrice">￥43.80</span>
                        </td>
                        <td>
                            <div class="cartProductChangeNumberDiv">
                                <span pid="809" class="hidden orderItemStock ">17</span>
                                <span pid="809" class="hidden orderItemPromotePrice ">152.75</span>
                                <a href="#nowhere" class="numberMinus" pid="809">-</a>
                                <input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="935" pid="809">
                                <a href="#nowhere" class="numberPlus" pid="809" stock="17">+</a>
                            </div>                    
                         </td>
                        <td>
                            <span pid="809" oiid="935" id="cartProductItemSmallSumPrice" class="cartProductItemSmallSumPrice">
                            ￥152.75
                            </span>
                        </td>
                        <td>
                            <a href="#nowhere" oiid="935" class="deleteOrderItem">删除</a>
                        </td>
                    </tr>
            </tbody>
        </table>
    </div>
     <div class="cartFoot">
        <img src="http://how2j.cn/tmall/img/site/cartNotSelected.png" class="selectAllItem" selectit="false">
        <span>全选</span>
<!--         <a href="#">删除</a> -->
        <div class="pull-right">
            <span>已选商品 <span id="cartSumNumber" class="cartSumNumber">0</span> 件</span>
            <span>合计 (不含运费): </span> 
            <span id="cartSumPrice" class="cartSumPrice">￥0.00</span>
            <button class="createOrderButton" style="background-color: rgb(170, 170, 170);" disabled="disabled">结  算</button>
        </div>
    </div>

CSS部分

在这里插入代码片

	img.cartProductItemIfSelected, img.selectAllItem {
		cursor: pointer;
	}
	tr.cartProductItemTR {
		border: 1px solid #CCCCCC;
	}
	div.cartProductChangeNumberDiv {
		border: solid 1px #E5E5E5;
		width: 80px;
	}
	table.cartProductTable {
		width: 100%;
		font-size:12px;
	}
	span.cartProductItemOringalPrice {
		text-decoration: line-through;
		color: #9C9C9C;
		display: block;
		font-weight: bold;
		font-size: 14px;
	}
	div.cartProductChangeNumberDiv input {
		border: solid 1px #AAAAAA;
		width: 42px;
		display: inline-block;
	}
	div.cartProductChangeNumberDiv a {
		text-decoration: none;
	}
	img.cartProductImg {
		padding: 1px;
		border: 1px solid #EEEEEE;
		width: 80px;
		height: 80px;
	}
	a.cartProductLink {
		color: #3C3C3C;
	}
	a.cartProductLink:hover {
		color: #C40000;
		text-decoration: underline;
	}
	div.cartProductLinkOutDiv {
		position: relative;
		height: 80px;
	}
	span.cartSumNumber {
		color: #C40000;
		font-weight: bold;
		font-size: 16px;
	}
	tr.cartProductItemTR td {
		padding: 20px 20px;
	}
	span.cartSumPrice {
		color: #C40000;
		font-weight: bold;
		font-size: 20px;
	}
	span.cartProductItemPromotionPrice {
		font-family: Arial;
		font-size: 14px;
		font-weight: bold;
		color: #C40000;
	}
	span.cartProductItemSmallSumPrice {
		font-family: Arial;
		font-size: 14px;
		font-weight: bold;
		color: #C40000;
	}
	span.cartTitlePrice {
		color: #C40000;
		font-size: 14px;
		font-weight: bold;
		margin-left: 5px;
		margin-right: 3px;
	}
	div.cartProductLinkInnerDiv {
		position: absolute;
		bottom: 0;
		height: 20px;
	}
	div.cartTitle button {
		background-color: #AAAAAA;
		border: 1px solid #AAAAAA;
		color: white;
		width: 53px;
		height: 25px;
		border-radius: 2px;
	}
	div.cartFoot {
		background-color: #E5E5E5;
		line-height: 50px;
		margin: 20px 0px;
		color: black;
		padding-left: 20px;
	}
	div.cartFoot button {
		background-color: #AAAAAA;
		border: 0px solid #AAAAAA;
		color: white;
		height: 100%;
		width: 120px;
		height: 50px;
		font-size: 20px;
		text-align: center;
	}
	table.cartProductTable th {
		font-weight: normal;
		color: #3C3C3C;
		padding: 20px 20px;
	}
	table.cartProductTable th.selectAndImage{
		width:200px;
	}
	table.cartProductTable th.operation{
		width:30px;
	}
	div.cartDiv {
		max-width: 1013px;
		margin: 10px auto;
		color: black;
	}

页脚

HTML部分


    <div class="footer" id="footer">
	<div class="copyright" id="copyright">
		<div class="white_link">
			<a href="#nowhere">关于天猫</a>
			<a href="#nowhere"> 帮助中心</a>
			<a href="#nowhere">开放平台</a>
			<a href="#nowhere">  诚聘英才</a>
			<a href="#nowhere">联系我们</a>
			<a href="#nowhere">网站合作</a>
			<a href="#nowhere">法律声明</a>
			<a href="#nowhere">知识产权</a>
			<a href="#nowhere">  廉正举报	</a>
		</div>
		<div class="white_link">
			<a href="#nowhere"> 阿里巴巴集团</a>
			<a href="#nowhere"> 淘宝网</a>
			<a href="#nowhere">天猫 </a>
			<a href="#nowhere">  聚划算</a>
			<a href="#nowhere">全球速卖通</a>
			<a href="#nowhere">阿里巴巴国际交易市场
			<a href="#nowhere">1688</a>
			<a href="#nowhere">阿里妈妈</a>
			<a href="#nowhere">  阿里旅行·去啊	</a>
			<a href="#nowhere">  阿里云计算	</a>
			<a href="#nowhere">  阿里通信 	</a>
			<a href="#nowhere">  YunOS	</a>
			<a href="#nowhere">  阿里旅行·去啊	</a>
			<a href="#nowhere">   万网	</a>
			<a href="#nowhere">  高德	</a>
			<a href="#nowhere">  来往	</a>
			<a href="#nowhere">  钉钉	</a>
			<a href="#nowhere">  支付宝 		</a>
		</div>
		<div class="license">
			<span>增值电信业务经营许可证：<span class="blod">浙B2-20110446</span> </span>
			<span>网络文化经营许可证：<span class="blod">浙网文[2015]0295-065号</span> </span>
			<span>
			<img src="https://img.alicdn.com/tps/TB1yEqRPXXXXXXPXpXXXXXXXXXX-20-20.png" >
			<a href="#nowhere">浙-（经营性）-2017005</a>
		</span>
			<span>互联网医疗保健信息服务 审核同意书 浙卫网审【2014】6号 </span>
			<span>互联网药品信息服务资质证书编号：<a href="#nowhere">浙-（经营性）-2012-0005</a></span>
		
		    <div class="copyRightYear">© 2003-2016 TMALL.COM 版权所有</div>

		</div>
	</div>
</div>

CSS部分

div.footer{
	margin-top: 60px;
	
}
div.copyright a{
	margin-left: 9px;
	font-size: 11px;
	color: #686868;
}
div.white_link{
	padding-left: 20px;
    padding-bottom: 10px;
	}
div.license{
	color:#A4A4A4;
	margin-left: 29px;
	margin-right: 95px;
	color: #686868;
	font-size: 11px;
}
div.license span{
	margin-right: 40px;	
}
div.license span.blod{
	color: black;
	font-weight: bold;
}

javascript的应用

其中用到了Jquery
我们需要提前导入

<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>

为了实现动态的效果，也就是说当用户点击选择框，结算按钮那里的价格就会自动更新。大概就是以下的效果。

什么都不勾选时

在这里插入图片描述

当点击一个选择框时

在这里插入图片描述

当点击全选时

在这里插入图片描述
上下的全选按钮都得到了相应，并且价格和商品件数都会随之而改变。

数量的修改

通过两种方式对于数量进行修改。

  • 文本框
  • 点击“+” 、“-”
    在这里插入图片描述

实现代码

<script>
  $(function(){
	  //点击产品选择框
	  $("img.cartProductItemIfSelected").click(function(){
        var selectit = $(this).attr("selectit");
        if("selectit"==selectit){
            $(this).attr("src","http://how2j.cn/tmall/img/site/cartNotSelected.png");
            $(this).attr("selectit","false")
            $(this).parents("tr.cartProductItemTR").css("background-color","#fff");
			syncSelect();
			syncCreateOrderButton();
			removePrice();
        }
        else{
            $(this).attr("src","http://how2j.cn/tmall/img/site/cartSelected.png");
            $(this).attr("selectit","selectit")
            $(this).parents("tr.cartProductItemTR").css("background-color","#FFF8E1");
			syncSelect();
			syncCreateOrderButton();
			getPrice(); 
        }
    });
	  //点击全选选择框
	$("img.selectAllItem").click(function(){
		var selectit = $(this).attr("selectit");
		 if("selectit"==selectit){
             $("img.selectAllItem").attr("src","http://how2j.cn/tmall/img/site/cartNotSelected.png");
             $("img.selectAllItem").attr("selectit","false")
			 $("img.cartProductItemIfSelected").attr("src","http://how2j.cn/tmall/img/site/cartNotSelected.png");
			 $("img.cartProductItemIfSelected").attr("selectit","false");
			 $("img.cartProductItemIfSelected").parents("tr.cartProductItemTR").css("background-color","#fff");
			 removePrice();
            
        }
        else{
            $("img.selectAllItem").attr("src","http://how2j.cn/tmall/img/site/cartSelected.png");
            $("img.selectAllItem").attr("selectit","selectit");
            $("img.cartProductItemIfSelected").attr("src","http://how2j.cn/tmall/img/site/cartSelected.png");
			$("img.cartProductItemIfSelected").attr("selectit","selectit");
			$("img.cartProductItemIfSelected").parents("tr.cartProductItemTR").css("background-color","#FFF8E1");
			getPrice();
			
        }
	});
	  //键盘输入数量
	$(".orderItemNumberSetting").keyup(function(){
        var pid=$(this).attr("pid");
        var stock= $("span.orderItemStock[pid="+pid+"]").text();
        var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();
        var num= $(".orderItemNumberSetting[pid="+pid+"]").val();
        num = parseInt(num);
        if(isNaN(num))
			{num= 1;
            }
        if(num<=0)
            num = 1;
        if(num>stock)
            num = stock;
		$(".orderItemNumberSetting[pid="+pid+"]").val(num);
		//改变金额
		price=convertNumber(price)*num;
		price=parseFloat(price).toFixed(2);
		$(".cartProductItemSmallSumPrice[pid="+pid+"]").html("￥"+price);
		getPrice();
    });
	  //点击+增加数量
	$(".numberPlus").click(function(){
		var pid=$(this).attr("pid");
        var stock= $("span.orderItemStock[pid="+pid+"]").text();
        var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();
        var num= $(".orderItemNumberSetting[pid="+pid+"]").val();
		++num;
		$(".orderItemNumberSetting[pid="+pid+"]").val(num);
		price=convertNumber(price)*num;
		price=parseFloat(price).toFixed(2);
		$(".cartProductItemSmallSumPrice[pid="+pid+"]").html("￥"+price);
		getPrice();
	});
	  //点击-减少数量 
	 $(".numberMinus").click(function(){
		var pid=$(this).attr("pid");
        var stock= $("span.orderItemStock[pid="+pid+"]").text();
        var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();
        var num= $(".orderItemNumberSetting[pid="+pid+"]").val();
		--num;
		 if(num==0)num=1;
		$(".orderItemNumberSetting[pid="+pid+"]").val(num);
		price=convertNumber(price)*num;
		price=parseFloat(price).toFixed(2);
		$(".cartProductItemSmallSumPrice[pid="+pid+"]").html("￥"+price);
		getPrice();
	 })
  });
 //全选函数
function syncSelect(){
    var selectAll = true;
    $(".cartProductItemIfSelected").each(function(){
        if("false"==$(this).attr("selectit")){
            selectAll = false;
        }
    });
    if(selectAll){
		$("img.selectAllItem").attr("src","http://how2j.cn/tmall/img/site/cartSelected.png");
	}

    else{
		$("img.selectAllItem").attr("src","http://how2j.cn/tmall/img/site/cartNotSelected.png");
	}
			
}

function syncCreateOrderButton(){
    var selectAny = false;
    $(".cartProductItemIfSelected").each(function(){
		
        if("selectit"==$(this).attr("selectit")){
            selectAny = true;
        }
    });
    if(selectAny){
        $("button.createOrderButton").css("background-color","#C40000");
        $("button.createOrderButton").removeAttr("disabled");
    }
    else{
        $("button.createOrderButton").css("background-color","#AAAAAA");
        $("button.createOrderButton").attr("disabled","disabled");      
    }
}
	//获取产品金额
function getPrice(){
	var price;
	var oiid;
	var sumPrice=0;
    var sumNum=0;
	$(".cartProductItemIfSelected").each(function(){
		if("selectit"==$(this).attr("selectit")){
			oiid=$(this).attr("oiid");
			pid=$(".orderItemNumberSetting[oiid="+oiid+"]").attr("pid");
			num=$(".orderItemNumberSetting[pid="+pid+"]").val();
			sumNum=parseInt(sumNum)+parseInt(num);
			if(isNaN(sumNum)){
				sumNum=1;
			}
	   		price=$(".cartProductItemSmallSumPrice[oiid="+oiid+"]").text();
			price=convertNumber(price);
			sumPrice=parseFloat(sumPrice)+parseFloat(price);
			sumPrice=parseFloat(sumPrice).toFixed(2);
			creatSumPrice(sumPrice,sumNum);
		}
	  })
 }								   

function convertNumber(price){
	price=price.replace(/\￥|\,/g,'');
	price=parseFloat(price).toFixed(2);
	return price;
}
//将计算后的金额数转化成页面展示的价格，也就是增加价格符号
function creatSumPrice(sumPrice,sumMumber){
	document.getElementById("cartSumPrice").innerHTML="￥"+sumPrice;
	document.getElementById("cartTitlePrice").innerHTML="￥"+sumPrice;
	document.getElementById("cartSumNumber").innerHTML=sumMumber;
	
}
//初始化价格
function removePrice(){
	document.getElementById("cartSumPrice").innerHTML="￥0.00";
	document.getElementById("cartTitlePrice").innerHTML="￥0.00";
	document.getElementById("cartSumNumber").innerHTML="0";
}
</script>

如有什么不明白欢迎大家留言。

AA-Jessica
发布了29 篇原创文章 · 获赞 10 · 访问量 7484
私信 关注

猜你喜欢

转载自blog.csdn.net/qmqm33/article/details/101785453
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022