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 相关文章推荐
javascript attachEvent和addEventListener使用方法
Mar 19 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
js实现下一页页码效果
Mar 07 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
Angular 数据请求的实现方法
May 07 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 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+mysql 实现身份验证代码
2010/03/24 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
JavaScript加强之自定义event事件
2013/09/21 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
微信小程序实现手指触摸画板
2018/07/09 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
微信小程序select下拉框实现源码
2019/11/08 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
python设置检查点简单实现代码
2014/07/01 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
详解python运行三种方式
2019/05/13 Python
详解numpy的argmax的具体使用
2019/05/27 Python
wxPython实现整点报时
2019/11/18 Python
python matplotlib拟合直线的实现
2019/11/19 Python
python suds访问webservice服务实现
2020/06/26 Python
英国儿童图书网站:Scholastic
2017/03/26 全球购物
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
生日礼品店创业计划书范文
2014/03/21 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
2015年护士节慰问信
2015/03/23 职场文书
领导干部失职检讨书
2015/05/05 职场文书
信用卡收入证明范本
2015/06/12 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书