jQuery+HTML5加入购物车代码分享


Posted in Javascript onOctober 29, 2020

这是一款基于jquery+html5实现的支持累加计价的网站购物车代码,可以把货物添加到购物车,添加物品数量,如果想取消购置某物品,这个功能也是可以实现的。

运行效果图:-----------------------------------查看效果-----------------------------------

jQuery+HTML5加入购物车代码分享
为大家分享的jQuery+HTML5加入购物车代码如下

<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jQuery+HTML5加入购物车代码</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://libs.useso.com/js/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="ct-pageWrapper">
 <main>
 <div class="container">
 <div class="row">
 <div class="col-md-3">
 <div class="widget">
 <h2 class="widget-header">购物车</h2>
 <div class="ct-cart"></div>
 </div>
 </div>
 <div class="col-md-9">
 <div class="row">
 <div class="col-sm-4">
 <div class="ct-product">
 <div class="image"><img src="images/product-01.jpg" alt=""></div>
 <div class="inner"><a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a>
 <h2 class="ct-product-title">Box of macaroons</h2>
 <p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$19.99</span>
 </div>
 </div>
 </div>
 <div class="col-sm-4">
 <div class="ct-product">
 <div class="image"><img src="images/product-02.jpg" alt=""></div>
 <div class="inner"><a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a>
 <h2 class="ct-product-title">Cherry Straws</h2>
 <p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$34.99</span>
 </div>
 </div>
 </div>
 <div class="col-sm-4">
 <div class="ct-product">
 <div class="image"><img src="images/product-03.jpg" alt=""></div>
 <div class="inner"><a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a>
 <h2 class="ct-product-title">Coffee Macaroons</h2>
 <p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$59.99</span>
 </div>
 </div>
 </div>
 <div class="col-sm-4">
 <div class="ct-product">
 <div class="image"><img src="images/product-04.jpg" alt=""></div>
 <div class="inner"><a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a>
 <h2 class="ct-product-title">Finetti ones</h2>
 <p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$9.99</span>
 </div>
 </div>
 </div>
 <div class="col-sm-4">
 <div class="ct-product">
 <div class="image"><img src="images/product-05.jpg" alt=""></div>
 <div class="inner"><a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a>
 <h2 class="ct-product-title">Minty duo</h2>
 <p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$3.99</span>
 </div>
 </div>
 </div>
 <div class="col-sm-4">
 <div class="ct-product">
 <div class="image"><img src="images/product-06.jpg" alt=""></div>
 <div class="inner"><a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a>
 <h2 class="ct-product-title">Pistachio</h2>
 <p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$13.99</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </main>

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/shop.min.js"></script>
<script>
$('body').ctshop({
 currency: '$',
 paypal: {
 currency_code: 'EUR'
 }
});
</script>
</div>

<div style="text-align:center;margin:-50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

以上就是分享的jQuery+HTML5加入购物车代码,希望大家可以喜欢。

Javascript 相关文章推荐
js window.event对象详尽解析
Feb 17 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 #Javascript
jQuery超赞的评分插件(8款)
Aug 20 #Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 #Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 #Javascript
js实现文字在按钮上滚动的方法
Aug 20 #Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 #Javascript
js实现网页多级级联菜单代码
Aug 20 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
jquery实现选项卡切换代码实例
2019/05/14 jQuery
vue实现中部导航栏布局功能
2019/07/30 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[00:35]可解锁地面特效
2018/12/20 DOTA
python每次处理固定个数的字符的方法总结
2013/01/29 Python
python中map、any、all函数用法分析
2015/04/21 Python
详解Python当中的字符串和编码
2015/04/25 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
python实现键盘输入的实操方法
2019/07/16 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
个人简历的自荐信
2013/10/23 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
工地材料员岗位职责
2015/04/11 职场文书
工作经历证明范本
2015/06/15 职场文书
生活小常识广播稿
2015/08/19 职场文书