使用js jquery去搭建完成京东购物车

最新推荐文章于 2023-08-30 21:53:10 发布
最新推荐文章于 2023-08-30 21:53:10 发布
阅读量1.5k 收藏 13
点赞数 2
文章标签： js html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43545801/article/details/113006737
版权

使用js jquery去搭建完成京东购物车

使用html css完成基本页面

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	<link rel="stylesheet" type="text/css" href="css/jd.css"/>
	<!--添加矢量图标的css-->
	<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
	
	<body>
		<!--导航开始-->
		<div class="nav">
			<div class="warp">
				<ul class="nav_ul1">
					<li><a href=""><i class="iconfont">&#xe8ff;</i>京东首页</a></li>
					<li><a href="">配送至：北京</a></li>
				</ul>
				
				<ul class="nav_ul2">
		  	 	  	<li><a href="">洋洋宝贝</a><span>|</span></li>
		  	 	  	<li><a href="">我的订单</a><span>|</span></li>
		  	 	  	<li><a href="">我的京东</a><span>|</span></li>
		  	 	  	<li><a href="">京东会员</a><span>|</span></li>
		  	 	  	<li><a href="">企业采购</a><span>|</span></li>
		  	 	  	<li><a href="">京东手机</a><span>|</span></li>
		  	 	  	<li><a href="">关注京东</a><span>|</span></li>
		  	 	  	<li><a href="">客户服务</a><span>|</span></li>
		  	 	  	<li><a href="">网站导航</a></li>
				</ul>
			</div>
		</div> 
		<!--导航结束-->
		
		<!--搜索框-->
		<div class="search">
			<div class="warp">
				<img src="img/logo.jpg" /> 
		  	  	  
		  	  	  <div class="search_div">
		  	  	  	 
		  	  	  	  <input type="text" class="search_text" />
		  	  	  	
		  	  	  	  <input type="button" value="搜索"  class="search_but"/>
		  	  	  	  
		  	  	  </div>
			</div>
		</div>
		
		<!--搜索框结束-->
		
		<!--标题开始-->
		  <div class="title warp">
		  	
		  	  <h3>全部商品</h3>
		  	   
		  	  <div>
		  	  	 
		  	  	 <span>配送到</span>
		  	  	
		  	  	<select>
		  	  		<option>昌平区</option>
		  	  		
		  	  		<option>顺义区</option>
		  	  		
		  	  		<option>大兴区</option>
		  	  		
		  	  		<option>朝阳区</option>
		  	  		
		  	  		<option>雁塔区</option>
		  	  		
		  	  		
		  	  	</select>
		  	  	
		  	  </div>
		  	
		  </div>
		<!--标题结束-->
		
		<!--显示菜单的开始-->
		  <div class="tips warp">
		  	
		  	 <ul>
		  	 	<li>
		  	 		<!--onelick--单击事件       checkTest1(this)的this相当于整个input框本身-->
		  	 		<input type="checkbox" name="fav" id="all" onclick="checkTest1(this),checkTest2()"/>
		  	 		全选
		  	 	</li>
		  	 	<li>商品</li>
		  	 	<li>单价</li>
		  	 	<li>数量</li>
		  	 	<li>小计</li>
		  	 	<li>操作</li>
		  	 </ul> 
		  	 
		  </div>
		<!--显示菜单的结束-->
		
		<!--商品详情展示开始-->
		  <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"
最低0.47元/天 解锁文章
这个ID没什么特点
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery仿购物车案例
原地起飞
11-27 1541
今天成功解锁购物车，想要更多可能就往下看吧！！ 一、全选 二、增减商品数量 三、修改商品小计 四、计算总计和总和 五、删除商品 六、选中商品添加背景 七、全部文件 今天是一些购物车的基本功能实现，全选、增减商品数量、修改商品小计、计算总计和总和、删除商品、选中添加背景颜色等一些常见功能。 html结构的全部代码都在文末了，懂的都懂啊！！！ 一、全选 全选分析： ⭐全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按...
通过JQuery实现购物车的效果
weixin_44610025的博客
02-14 1548
今天，主要来说一下如何通过JQuery来实现一个简易版的购物车效果。 首先，通过ajax来进行请求。 // 1、通过ajax来进行请求 $.ajax({ url: "data.json", success: function(arr){ // JQuery在下载数据的时候，根据下载的数据，自动进行数据类型转换 // 加入购物车设置id，id和当前按钮所在的【商品的id】相同。 ...
jQuery项目：京东商品详情页
楚璃轩
07-01 2057
目录需求分析代码分析1. 鼠标移入显示,移出隐藏2. 鼠标移动切换二级导航菜单的切换显示和隐藏3. 输入搜索关键字, 列表显示匹配的结果4. 点击显示或者隐藏更多的分享图标5. 鼠标移入移出切换地址的显示隐藏6. 点击切换地址tab7. 鼠标移入移出切换显示迷你购物车8. 点击切换产品选项 (商品详情等显示出来)9. 点击向右/左, 移动当前展示商品的小图片10. 当鼠标悬停在某个小图上,在上方显示对应的中图11. 当鼠标在中图上移动时, 显示对应大图的附近部分区域完整代码 需求分析 鼠标移入显示,移出隐
基于jQuery的前后端交互的购物车
牛先森家的博客
08-03 724
购物车基于前后端交互的购物车phphtml和csscar.js问题截图如下 基于前后端交互的购物车 分析表的设计： * 用户信息表 userinf * 商品信息表 goodslist * 订单表 ordergoods * 总价表 存总数量和总价：存储打钩准备购买但是没有结算的数据 存到本地 接口分析： * 注册页： * 验证用户名是否存在 select
jQuery实现购物车完整功能，script+css完整代码+详细解释，可复制粘贴使用，更改图片及相关数据即可
bsf000000___的博客
08-30 1043
jQuery实现购物车完整功能，script+css完整代码+详细解释，可复制粘贴使用，更改图片及相关数据即可
jQuery模仿京东商城购物车
09-13
jQuery模仿京东商城购物车，可查看购物车商品，删除商品，登录等功能。
jQuery京东右侧边栏购物车功能菜单代码
11-19
jQuery京东右侧边栏购物车功能菜单代码 jQuery京东右侧边栏购物车功能菜单代码 jQuery京东右侧边栏购物车功能菜单代码 jQuery京东右侧边栏购物车功能菜单代码
jQuery点击添加到购物车
03-06
jQuery点击添加到购物车 适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
使用jQuery实现购物车结算功能
10-19
本文将详细介绍如何使用jQuery实现购物车结算功能。jQuery是一个广泛使用的JavaScript库，简化了DOM操作、事件处理和动画制作等任务，因此非常适合构建这样的功能。 首先，我们来看一下提供的HTML结构。在这个示例...
jQuery使用cookie与json简单实现购物车功能
10-22
主要介绍了jQuery使用cookie与json简单实现购物车功能的方法,介绍了jQuery实现购物车的步骤与关键代码,需要的朋友可以参考下
jQuery仿京东鼠标悬浮购物车效果
09-04
jQuery仿京东鼠标悬浮购物车效果
仿京东购物车页面
04-18
仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面仿京东购物车页面
基于jq的购物车-移动端购物车
01-08
基于jq的移动端购物车，单条商品选择，全选，单个商品增加与减少同时总金额同步改变，删除单个商品等
仿京东购物车--js，css混合应用
qq_41731829的博客
09-13 3152
这学期会用到RN 开发，顺便复习一下上学期的京东购物车 未购买物品 动态js添加购物车，结算选中商品，包括猜你喜欢和随手购两个物品菜单栏。 导航栏中的矢量图是从阿里上下载的，右侧固定菜单用绝对定位做了一个。 主要说几个点其他的在最后会把源码发上来，首先是比较核心的代码块 每次添加商品不管是拖拽还是直接点击按钮，js函数中其实就是单纯写了一个div然后把它作为参数赋值给了一个变...
案例：购物车 商品加减号
青衣的博客
09-02 548
<div class="c-container"> <div class="w"> <div class="cart-warp"> <!-- 头部全选模块 --> <div class="cart-thead"> <div class="t-checkbox"> <input type=.
仿京东购物车底部栏制作思路
qq_55793804的博客
04-07 502
这两天做电商项目的时候，参考了很多电商网站，发现京东的购物车底部栏非常人性化，于是模仿京东做了一个。 先附上效果图 这是底部栏可视的情况，此时的底部栏是固定在商品栏底部的。 当商品数量过多底部栏不可视时，底部栏固定在页面底随滚动条移动。 实现思路 一开始的想法是在car-footer（底部栏）子组件里计算高度实时判断。 我的思路是，计算底部栏是否在页面可视范围内，如果在，则添加car-fixed类，使它固定在底部。 但是一旦计算出不在可视范围，添加上类以后，底部栏.
JQuery编写简易京东购物车功能
Ping_Pig的博客
01-10 2338
前天无意间看到有一位程序员的博客，有一篇名为无聊时编写的购物车，看了之后，只是觉得很垃圾，因为代码很臃肿，当然我写的也不咋地，当然我也是复习一下所学的js，再敲这个的期间遇到了如下问题,1:子元素父元素的混乱使用，层次没了解清楚就上手写！2：类型转换的问题，其中结算部分的ParesFloat和ParesInt以及.toFixed(2)的四舍五入,类型的把握，当然因为懒得弄，所以就直接写在了html
仿京东的购物车和订单
biggrand的博客
12-21 2092
//从购物车跳转到了确认订单界面 /** * 确认下单界面 */ public class Main2Activity extends AppCompatActivity { private TextView text_order; private TextView text_kuan; private ImageView tu; @Override protected void
仿京东购物车
qq_40702815的博客
05-20 556
布局文件shopcart_seller_product_item.xml&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"&g...
jquery简单实现购物车
最新发布
12-27
以下是一个简单的使用jQuery实现购物车的例子： ```html <!DOCTYPE html> <html> <head> <title>购物车</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> .item { margin-bottom: 10px; } .item input[type="checkbox"] { margin-right: 5px; } .total { font-weight: bold; } </style> </head> <body> <h1>购物车</h1> <div class="item"> <input type="checkbox" class="checkbox"> <span>商品1 - 100元</span> </div> <div class="item"> <input type="checkbox" class="checkbox"> <span>商品2 - 200元</span> </div> <div class="item"> <input type="checkbox" class="checkbox"> <span>商品3 - 300元</span> </div> <div class="total"> 总价：<span id="totalPrice">0</span>元 </div> <script> $(document).ready(function() { // 全选按钮点击事件 $("#selectAll").click(function() { $(".checkbox").prop("checked", $(this).prop("checked")); calculateTotalPrice(); }); // 单个商品复选框点击事件 $(".checkbox").click(function() { calculateTotalPrice(); }); // 计算总价 function calculateTotalPrice() { var totalPrice = 0; $(".checkbox:checked").each(function() { var price = parseInt($(this).next().text().split(" - ")[1]); totalPrice += price; }); $("#totalPrice").text(totalPrice); } }); </script> </body> </html> ``` 这个例子中，我们使用了jQuery来实现购物车的功能。每个商品都有一个复选框和对应的价格，用户可以通过勾选复选框来选择要购买的商品，同时总价会实时更新。点击全选按钮可以全选或取消全选。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值