pc端 添加购物车示例
添加到购物车列表及相关商品推荐. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--<script type="text/javascript" src="js/tool.js"></script>-->
<style type="text/css">
*{margin: 0;padding: 0;}
ul{list-style: none;}
a{text-decoration: none;}
.box{
width: 1200px;
border: 1px solid;
margin: 50px auto 0;
}
.box ul{
overflow: hidden;
}
.box ul li{
width: 260px;
height: 100px;
font-size: 12px;
float: left;
margin-right: 53px;
margin-bottom: 15px;
}
.box .product a img{
float: left;
width: 98px;
height: 98px;
border: 1px solid #ccc;
margin-right: 10px;
}
.box .product .txt{
float: left;
width: 150px;
height: 36px;
line-height: 18px;
overflow: hidden;
}
.box .product .price{
float: left;
width: 150px;
color: #d91f20;
font-size: 14px;
margin-top: 5px;
overflow: hidden;
}
.box .product .add_to_cart{
float: left;
width: 105px;
height: 30px;
border: 1px solid #ccc;
margin-top: 8px;
text-align: center;
line-height: 30px;
}
.header{
width: 1200px;
/*height: 100px;*/
border: 1px solid #ccc;
margin: 0 auto;
}
.header .title{
display: flex;
justify-content: space-around;
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
background: #f3f3f3;
}
.header .cart_list_box{
max-height: 306px;
overflow: auto;
}
.header .cart_list{
border: 1px solid #ccc;
display: flex;
justify-content: space-between;
border-bottom: none;
}
.header .cart_list li{
float: left;
height: 50px;
width: 200px;
font-size: 14px;
line-height: 50px;
text-align: center;
overflow: hidden;
background: #fff4e8;
}
.header .cart_list li .img{
width: 50px;
height: 50px;
}
.product_total{
width: 1200px;
margin: 0 auto;
overflow: hidden;
outline: 1px solid #ccc;
}
.product_total .fr{
float: right;
width: 280px;
height: 50px;
}
.product_total .fr p{
float: left;
line-height: 50px;
color: #ccc;
font-size: 12px;
}
.product_total .fr .calc{
float: right;
width: 110px;
height: 50px;
background: #e64346;
color: #fff;
font-weight: bold;
text-align: center;
line-height: 50px;
font-size: 18px;
}
.product_total .fr p #total{
color: orange;
font-size: 22px;
}
.product_total .fr p i{
font-size: 20px;
color: orange;
font-style: normal;
}
.product_total .fl #removeAll{
float: left;
margin-left: 500px;
margin-top: 4px;
width: 110px;
height: 40px;
background: #fff8f8;
border: 1px solid #ffdfdf;
color: #999;
text-align: center;
line-height: 40px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="header">
<ul class="title">
<li>编号</li>
<li>图片</li>
<li>标题</li>
<li>数量</li>
<li>单价</li>
<li>操作</li>
</ul>
<div class="cart_list_box"> </div>
</div>
<div class="product_total">
<div class="fl">
<button id="removeAll">清空购物车</button>
</div>
<div class="fr">
<p>合计：<i>￥</i><span id="total">00.00</span></p>
<button class="calc">去结算</button>
</div>
</div> <div class="box">
<h3>购买了该商品的用户还购买了</h3>
<ul class="con"> </ul>
</div>
<ul class="conModel">
<li style="display: none">
<div class="id" style="display:none">1</div>
<a href=""><img class="img" src="data:images/01.jpg"></a>
<p class="txt">益达（Extra）木糖醇无糖口香糖冰凉薄荷70粒98单瓶装</p>
<span class="price">￥13.90</span>
<a href="javascript:void(0)" class="add_to_cart">加入购物车</a>
</li>
</ul>
<script src="jquery-3.2.1.min.js"></script>
<script>
var json = [
{"id":"1","img":"images/01.jpg","txt":"益达（Extra）木糖醇无糖口香糖冰凉薄荷70粒98单瓶装","price":"￥13.90"},
{"id":"2","img":"images/02.jpg","txt":"益达（Extra）尊享护齿56g*3瓶京东定制装（草本精华+冰","price":"￥24.90"},
{"id":"3","img":"images/03.jpg","txt":"绿箭（DOUBLEMINT）无糖薄荷糖冰柠薄荷味35粒23.8g","price":"￥7.50"},
{"id":"4","img":"images/04.jpg","txt":"益达（Extra）木糖醇无糖口香糖香浓蜜瓜40粒56g单瓶装","price":"￥8.80"},
{"id":"5","img":"images/05.jpg","txt":"益达（Extra）无糖口香糖沁凉薄荷12片32g单盒装","price":"￥5.50"},
{"id":"6","img":"images/06.jpg","txt":"益达木糖醇无糖口香糖瓶装56g/瓶 益达口香糖 休闲零食","price":"￥8.80"},
{"id":"7","img":"images/07.jpg","txt":"益达木糖醇无糖口香糖瓶装56g/瓶*9口味组合休闲零食","price":"￥75.60"},
{"id":"8","img":"images/08.jpg","txt":"益达 无糖口香糖70粒摇一摇四口味合装 赠益达西瓜味24","price":"￥52.90"}
];
var parent = $(".con",$(".box")[0])[0];
for(var i = 0,len = json.length; i < len; i++){
var clone = $("li",$(".conModel")[0])[0].cloneNode(true);
if((i+1) % 4 === 0){
clone.style.marginRight = "0";
}
clone.style.display = "block";
clone.className = "product";
clone.children[0].innerHTML = json[i].id;
clone.children[1].children[0].src = json[i].img;
clone.children[2].innerHTML = json[i].txt;
clone.children[3].innerHTML = json[i].price;
parent.appendChild(clone);
}
// 动态添加购物车列表
var add_to_cart = $(".add_to_cart",$(".con")[0]);
for(var j = 0,cartLen = add_to_cart.length; j < cartLen; j++){
add_to_cart[j].onclick = function(){
var cart_list = $(".cart_list",$(".header")[0]);
for(var k =0, cart_list_len = cart_list.length; k < cart_list_len; k++){
if(this.parentNode.children[0].innerHTML === $("li",$(".cart_list")[k])[0].innerHTML ){
var num = ++cart_list[k].children[3].innerHTML;
var prices2 = Number(cart_list[k].children[4].innerHTML.slice(1));
$("#total").text((Number($("#total").text()) + prices2).toFixed(2));
return;
}
}
var clone = $(".title",$(".header")[0])[0].cloneNode(true);
clone.className = "cart_list";
clone.children[0].innerHTML = this.parentNode.children[0].innerHTML;
clone.children[1].innerHTML = this.parentNode.children[1].innerHTML;
clone.children[2].innerHTML = this.parentNode.children[2].innerHTML;
clone.children[3].innerHTML = "1";
clone.children[4].innerHTML = this.parentNode.children[3].innerHTML;
clone.children[5].innerHTML = "<a href='javascript:void(0)' class='remove'>删除</a>";
$(".cart_list_box",$(".header")[0])[0].appendChild(clone);
var prices1 = Number(clone.children[4].innerHTML.slice(1));
$("#total").text((Number($("#total").text()) + prices1).toFixed(2));
// 删除购物车列表内指定商品
for(var l = 0,remove_len = $(".remove").length; l < remove_len; l++){
$(".remove")[l].onclick = function(){
if(confirm("确认删除该商品？")){
var price = (this.parentNode.parentNode.children[4].innerHTML).slice(1);
var num = this.parentNode.parentNode.children[3].innerHTML;
var removePrices = price * num;
$("#total").text( (Number($("#total").text()) - removePrices).toFixed(2));
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
}
}
}
} // 清空购物车
$("#removeAll").click(function(){
for(var i = 0,len = $(".cart_list_box")[0].children.length; i < len; i++){
$(".cart_list_box")[0].removeChild($(".cart_list_box")[0].children[0]);
}
$("#total").text("00.00");
})
//去结算
$(".calc").click(function () {
window.location.href='http://www.baidu.com';
})
</script>
</body>
</html>
pc端 添加购物车示例的更多相关文章
- 淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
- Ext-JS-Classic-Demo 面向pc端示例
基于Ext Js 6.5.1 面向pc端示例,低于此版本可能存在兼容问题,慎用 已忽略编译目录,请自行编译运行 Sencha Cmd 版本:v6.5.1.240 git地址:https://githu ...
- C#--图片上传（PC端和APP）保存及 跨域上传说明
手动跨域操作文件 补录:跨域访问文件夹文件是一种常见的需求,下面主要介绍的的通过代码使用具有权限账号的人来达到跨域操作文件的能力. 现在补充一下普通的一些需求场景,今天就遇到了一种需要经常需要登录远程 ...
- pygame开发PC端微信打飞机游戏
pygame开发PC端微信打飞机游戏 一.项目简介 1. 介绍 本项目类似曾经火爆的微信打飞机游戏.游戏将使用Python语言开发,主要用到pygame的API.游戏最终将会以python源文件gam ...
- PC端Web项目开发流程
从前一直再做前端,突然想到如果有一天领导让自己独立承担一个web 项目的话是否有足够的能力去接这个任务,要学会自己去搭建一些基础的工具信息.所有的这一切在心里都要有个大致的流程,不然真正做的时候难免会 ...
- 使用rem配置PC端自适应大屏
效果如下 使得大屏不论在什么宽高比例依然能展示全部数据 安装 npm install -S postcss-pxtorem rem配置思路 原先的rem函数是能解决大部分的问题的,如果展示不全,也可以 ...
- 第 31 章 项目实战-PC 端固定布局[3]
学习要点: 1.搜索区 2.插入大图 3.搜索框 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．搜索区 本节课 ...
- 第 31 章 项目实战-PC端固定布局[2]
学习要点: 1.大纲算法 2.section和div 3.结构分析 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现. 一．大纲算法 ...
- 第 31 章 项目实战-PC端固定布局[1]
学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现 ...
随机推荐
- 7.26-Codeforces Round #372 (Div. 2)
C. Plus and Square Root 链接:codeforces.com/group/1EzrFFyOc0/contest/716/problem/C 题型:构造 题意:起始数 x 为 2, ...
- 大项目小细节---onbeforeunload增强用户体验
微信公众平台编辑数据页面,点击浏览器回退按钮.刷新按钮(包括F5.Ctrl+R).关闭页面.点击其他超链接等操作的时候,会提示弹窗提示. 为增加用户体验,我们也增加类似功能. 代码如下: @if (R ...
- Linux 查看进程之PS命令
要对进程进行检测和控制,首先必须要了解当前进程的情况,也就是需要查看当前进程运行状态.Linux 系统中 我们可以使用 ps 命令查看进程. ps 命令介绍 ps(process stat ...
- 理解AJAX的原理
1.原生ajax异步请求(ajax的原理) (异步请求:无跳转,无刷新....)通过XMLHttpRequst对象,向服务器发送请求.XMLHttpRequest对象具有一些属性和方法. 1.首先创建 ...
- 『TensorFlow』slim模块常用API
辅助函数 slim.arg_scope() slim.arg_scope可以定义一些函数的默认参数值,在scope内,我们重复用到这些函数时可以不用把所有参数都写一遍,注意它没有tf.variable ...
- HDU4609 计数问题+FFT
题目大意: 给出n(1e5)条线段(长度为整数,<=1e5),求任取3条线段能组成一个三角形的概率. 用cnt[i]记录长度为i的线段的个数,通过卷积可以计算出两条线段长度之和为i的方案数sum ...
- HTTP 错误 500.19 - Internal Server Error v4.0.30319
1 打开运行,输入cmd进入到命令提示符窗口.2 进入到C:\Windows\Microsoft.NET\Framework\v4.0.30319 目录.3 输入aspnet_regiis.exe - ...
- iozone的三大神器之一fileop
iozone用了很久,查看源码,发现iozone其实还附带两个工具fileop和pit_server,fileop测试了POSIX常用的函数,pit_server用来测试TCP或UDP服务 今天用了一 ...
- 学习笔记——SM2算法原理及实现
RSA算法的危机在于其存在亚指数算法,对ECC算法而言一般没有亚指数攻击算法 SM2椭圆曲线公钥密码算法:我国自主知识产权的商用密码算法,是ECC(Elliptic Curve Cryptosyste ...
- Android 音视频深入 七 学习之路的总结和资料分享
说个实话一开始我对基于Android如何开发音视频很迷茫,甚至对音视频开发都不是很明白,我看了Android 音视频开发入门指南 http://blog.51cto.com/ticktick/1956 ...