前言

一、HTML

二、CSS

三、JQ

总结

图片两张自己另存

今天上课用jq做了个简单的购物车功能，其中核心功能有

1//全选
2//单选加商品背景
3//全选加商品背景
4//点击删除
5//删除选中商品
6//清空购物车
7//商品数量减
8//商品数量加
9//总价

的实现。接下来看代码。

一、HTML

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>我的购物车-品优购</title><meta name="description"content="品优购-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"><meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购"><!-- 引入css 初始化的css 文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入公共样式的css 文件 --><link rel="stylesheet" href="css/common.css"><!-- 引入car css --><link rel="stylesheet" href="css/car.css"><script src="js/jquery.min.js"></script><script src="js/shopcar.js"></script></head><body><div class="car-header"><div class="w"><div class="car-logo"><img src="img/logo.png" alt=""> <b>购物车</b></div></div></div></div><div class="c-container"><div class="w"><div class="cart-filter-bar"><em>全部商品</em></div><!-- 购物车主要核心区域 --><div class="cart-warp"><!-- 头部模块 --><div class="cart-thead"><div class="t-checkbox"><input type="checkbox" name="" id="" class="checkall"> 全选</div><div class="t-goods">商品</div><div class="t-price">单价</div><div class="t-num">数量</div><div class="t-sum">小计</div><div class="t-action">操作</div></div><!-- 商品列表模块 --><div class="cart-item-list"><div class="cart-item check-cart-item"><div class="p-checkbox"><input type="checkbox" checked class="j-checkbox"></div><div class="p-goods"><div class="p-img"><img src="upload/p1.jpg" alt=""></div><div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div></div><div class="p-price">￥12.60</div><div class="p-num"><div class="quantity-form"><a href="javascript:;" class="decrement">-</a><input type="text" class="itxt" value="1"><a href="javascript:;" class="increment">+</a></div></div><div class="p-sum">￥12.60</div><div class="p-action"><a href="javascript:;">删除</a></div></div><div class="cart-item"><div class="p-checkbox"><input type="checkbox" class="j-checkbox"></div><div class="p-goods"><div class="p-img"><img src="upload/p2.jpg" alt=""></div><div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div></div><div class="p-price">￥24.80</div><div class="p-num"><div class="quantity-form"><a href="javascript:;" class="decrement">-</a><input type="text" class="itxt" value="1"><a href="javascript:;" class="increment">+</a></div></div><div class="p-sum">￥24.80</div><div class="p-action"><a href="javascript:;">删除</a></div></div><div class="cart-item"><div class="p-checkbox"><input type="checkbox" class="j-checkbox"></div><div class="p-goods"><div class="p-img"><img src="upload/p3.jpg" alt=""></div><div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div></div><div class="p-price">￥29.80</div><div class="p-num"><div class="quantity-form"><a href="javascript:;" class="decrement">-</a><input type="text" class="itxt" value="1"><a href="javascript:;" class="increment">+</a></div></div><div class="p-sum">￥29.80</div><div class="p-action"><a href="javascript:;">删除</a></div></div></div><!-- 结算模块 --><div class="cart-floatbar"><div class="select-all"><input type="checkbox" name="" id="" class="checkall">全选</div><div class="operation"><a href="javascript:;" class="remove-batch"> 删除选中的商品</a><a href="javascript:;" class="clear-all">清理购物车</a></div><div class="toolbar-right"><div class="amount-sum">已经选<em>1</em>件商品</div><div class="price-sum">总价： <em>￥12.60</em></div><div class="btn-area">去结算</div></div></div></div></div></div></body>
</html>

二、CSS

1、base.css

/*  base.css */
/*清除元素默认的内外边距  */
* {margin: 0;padding: 0
}
/*让所有斜体 不倾斜*/
em,
i {font-style: normal;
}
/*去掉列表前面的小点*/
li {list-style: none;
}
/*图片没有边框   去掉图片底侧的空白缝隙*/
img {border: 0;  /*ie6*/vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {cursor: pointer;
}
/*取消链接的下划线*/
a {color: #666;text-decoration: none;
}a:hover {color: #e33333;
}button,
input {font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;/*取消轮廓线 蓝色的*/outline: none;
}body {background-color: #fff;font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;color: #666
}.hide,
.none {display: none;
}
/*清除浮动*/
.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}.clearfix {*zoom: 1
}

2、car.css

/*car.css*/
.car-header {padding: 20px 0;
}.car-logo img {vertical-align: middle;
}.car-logo b {font-size: 20px;margin-top: 20px;margin-left: 10px;
}.cart-filter-bar {font-size: 16px;color: #E2231A;font-weight: 700;
}.cart-filter-bar em {padding: 5px;border-bottom: 1px solid #E2231A;
}.cart-thead {height: 32px;line-height: 32px;margin: 5px 0 10px;padding: 5px 0;background: #f3f3f3;border: 1px solid #e9e9e9;border-top: 0;position: relative;
}.cart-thead>div,
.cart-item>div {float: left;
}.t-checkbox,
.p-checkbox {height: 18px;line-height: 18px;padding-top: 7px;width: 122px;padding-left: 11px;
}.t-goods {width: 400px;
}.t-price {width: 120px;padding-right: 40px;text-align: right;
}.t-num {width: 150px;text-align: center;
}.t-sum {width: 100px;text-align: right;
}.t-action {width: 130px;text-align: right;
}.cart-item {height: 160px;border-style: solid;border-width: 2px 1px 1px;border-color: #aaa #f1f1f1 #f1f1f1;background: #fff;padding-top: 14px;margin: 15px 0;
}.check-cart-item {background: #fff4e8;
}.p-checkbox {width: 50px;
}.p-goods {margin-top: 8px;width: 565px;
}.p-img {float: left;border: 1px solid #ccc;padding: 5px;
}.p-msg {float: left;width: 210px;margin: 0 10px;
}.p-price {width: 110px;
}.quantity-form {width: 80px;height: 22px;
}.p-num {width: 170px;
}.decrement,
.increment {float: left;border: 1px solid #cacbcb;height: 18px;line-height: 18px;padding: 1px 0;width: 16px;text-align: center;color: #666;margin: 0;background: #fff;margin-left: -1px;
}.itxt {float: left;border: 1px solid #cacbcb;width: 42px;height: 18px;line-height: 18px;text-align: center;padding: 1px;margin: 0;margin-left: -1px;font-size: 12px;font-family: verdana;color: #333;-webkit-appearance: none;
}.p-sum {font-weight: 700;width: 145px;
}/* 结算模块 */.cart-floatbar {height: 50px;border: 1px solid #f0f0f0;background: #fff;position: relative;margin-bottom: 50px;line-height: 50px;
}.select-all {float: left;height: 18px;line-height: 18px;padding: 16px 0 16px 9px;white-space: nowrap;
}.select-all input {vertical-align: middle;display: inline-block;margin-right: 5px;
}.operation {float: left;width: 200px;margin-left: 40px;
}.clear-all {font-weight: 700;margin: 0 20px;
}.toolbar-right {float: right;
}.amount-sum {float: left;
}.amount-sum em {font-weight: 700;color: #E2231A;padding: 0 3px;
}.price-sum {float: left;margin: 0 15px;
}.price-sum em {font-size: 16px;color: #E2231A;font-weight: 700;
}.btn-area {font-weight: 700;width: 94px;height: 52px;line-height: 52px;color: #fff;text-align: center;font-size: 18px;font-family: "Microsoft YaHei";background: #e54346;overflow: hidden;
}

3、common.css

/*common.css*/
/*公共样式*/.fl {float: left;
}.fr {float: right;
}@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?7kkyc2');src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?7kkyc2') format('truetype'), url('../fonts/icomoon.woff?7kkyc2') format('woff'), url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');font-weight: normal;font-style: normal;
}.fr .icomoon {font-family: 'icomoon';font-size: 16px;line-height: 26px;
}/*版心*/.w {width: 1200px;margin: 0 auto;
}.style-red {color: #c81623;
}.spacer {width: 1px;height: 12px;background-color: #666;margin: 9px 12px 0;
}/*顶部快捷导航*/.shortcut {height: 31px;background-color: #f1f1f1;line-height: 31px;
}.shortcut li {float: left;
}/*header区域*/.header {position: relative;height: 105px;
}.logo {position: absolute;top: 25px;left: 0;width: 175px;height: 56px;
}.logo a {display: block;/*overflow: hidden;*/width: 175px;height: 56px;background: url(../img/logo.png) no-repeat;/*text-indent: -999px;*/font-size: 0;
}.search {position: absolute;top: 25px;left: 348px;
}.text {float: left;width: 445px;height: 32px;border: 2px solid #b1191a;padding-left: 10px;color: #ccc;
}.btn {float: left;width: 82px;height: 36px;background-color: #b1191a;border: 0;font-size: 16px;color: #fff;
}.hotwrods {position: absolute;top: 65px;left: 348px;
}.hotwrods a {margin: 0 10px;
}.shopcar {position: absolute;top: 25px;right: 64px;width: 138px;height: 34px;border: 1px solid #dfdfdf;background-color: #f7f7f7;line-height: 34px;text-align: center;
}.car {font-family: 'icomoon';color: #da5555;
}.arrow {font-family: 'icomoon';margin-left: 5px;
}.count {position: absolute;top: -5px;/*应该是左侧对齐 文字才能往右走显示*/left: 100px;background-color: #e60012;height: 14px;padding: 0 3px;line-height: 14px;color: #fff;/*border-radius: 左上角 右上角  右下角  左下角;*/border-radius: 7px 7px 7px 0;
}/*nav start*/.nav {height: 45px;border-bottom: 2px solid #b1191a;
}.dropdown {width: 209px;height: 45px;
}.dropdown .dt {height: 100%;background-color: #b1191a;font-size: 16px;color: #fff;text-align: center;line-height: 45px;
}.dropdown .dd {height: 465px;background-color: #c81623;margin-top: 2px;
}.menu_item:hover {background-color: #fff;
}/*鼠标经过li 里面的 a变颜色*/.menu_item:hover a {color: #c81623;
}.menu_item {height: 31px;line-height: 31px;margin-left: 1px;padding: 0 10px;transition: all .5s;
}.menu_item:hover {padding-left: 20px;
}.menu_item a {font-size: 14px;color: #fff;
}.menu_item i {float: right;font-family: 'icomoon';font-size: 18px;color: #fff;
}.navitems {margin-left: 10px;
}.navitems li {float: left;
}.navitems li a {display: block;height: 45px;padding: 0 25px;line-height: 45px;font-size: 16px;
}/*footer 部分*/.footer {height: 386px;background-color: #f5f5f5;padding-top: 30px;
}.mod_service {height: 79px;border-bottom: 1px solid #ccc;
}.mod_service li {float: left;width: 240px;height: 79px;
}.mod-service-icon {/*浮动的盒子 可以直接给大小的 不需要转换*/float: left;width: 50px;height: 50px;margin-left: 35px;background: url(../img/icons.png) no-repeat;
}.mod_service_zheng {background-position: -253px -3px;
}.mod_service_tit {float: left;margin-left: 5px;
}.mod_service_tit h5 {margin: 5px 0;
}.mod_service_kuai {background-position: -255px -54px;
}.mod_service_bao {background-position: -257px -105px;
}.mod_help {height: 187px;border-bottom: 1px solid #ccc;
}.mod_help_item {float: left;width: 150px;padding: 20px 0 0 50px;
}.mod_help_item dt {height: 25px;font-size: 16px;
}.mod_help_item dd {height: 22px;
}.mod_help_app dt,
.mod_help_app p {padding-left: 15px;
}.mod_help_app img {margin: 7px 0;
}.mod_copyright {text-align: center;
}.mod_copyright_links {margin: 20px 0 15px 0;
}.mod_copyright_info {line-height: 18px;
}

三、JQ

/**//全选//单选加商品背景//全选加商品背景//点击删除//删除选中商品//清空购物车//商品数量减//商品数量加//总价
* */
$(function () {getsum();//全选$(".checkall").on("click", function () {$(".j-checkbox , .checkall").prop("checked",$(".checkall").prop("checked"));});$(".j-checkbox").on("click", function () {if ($(".j-checkbox:checked").length === $(".j-checkbox").length)$(".checkall").prop("checked", true);else $(".checkall").prop("checked", false);});//单选加商品背景$(".j-checkbox").on("change", function () {if ($(this).prop("checked"))$(this).parents(".cart-item").addClass("check-cart-item");else $(this).parents(".cart-item").removeClass("check-cart-item");getsum();});//全选加商品背景$(".checkall").on("change", function () {if ($(this).prop("checked")) $(".cart-item").addClass("check-cart-item");else $(".cart-item").removeClass("check-cart-item");getsum();});//点击删除$(".p-action a").on("click", function () {$(this).parents(".cart-item").remove();getsum();});//删除选中商品$(".remove-batch").on("click", function () {$(".j-checkbox:checked").parents(".cart-item").remove();getsum();});//清空购物车$(".clear-all").on("click", function () {$(".j-checkbox").parents(".cart-item").remove();getsum();});//商品数量减$(".decrement").on("click", function () {var a = $(this).siblings(".itxt").val();a--;if (a <= 0) a = 0;$(this).siblings(".itxt").val(a);var linemoney = $(this).parent().parent().siblings(".p-price").html();linemoney = Number(linemoney.substr(1));console.log($(this).siblings(".p-sum").html());$(this).parent().parent().siblings(".p-sum").html("¥" + (linemoney * a).toFixed(2));getsum();});function getsum() {var count = 0;$(".check-cart-item .itxt").each(function (i, DomElm) {count += parseInt($(DomElm).val());});$(".amount-sum em").text(count);var summoney = 0;$(".check-cart-item .p-sum").each(function (i, DomElm) {summoney += parseFloat($(DomElm).text().substr(1));});$(".price-sum").addClass("turnred");$(".price-sum").html("¥" + summoney.toFixed(2));}//商品数量加$(".increment").on("click", function () {var a = $(this).siblings(".itxt").val();a++;$(this).siblings(".itxt").val(a);var linemoney = $(this).parent().parent().siblings(".p-price").html();linemoney = Number(linemoney.substr(1));console.log($(this).siblings(".p-sum").html());$(this).parent().parent().siblings(".p-sum").html("¥" + (linemoney * a).toFixed(2));getsum();});//总价$(".itxt").on("change", function () {var count1 = $(this).val();var money1 = $(this).parents(".p-num").siblings(".p-price").text();money1 = money1.substr(1);$(this).parents(".p-num").siblings(".p-sum").html("¥" + (count1 * money1).toFixed(2));getsum();});
});

总结

创建新的项目，注意引进的css名称，js的名称。

文章目录

前言

一、HTML

二、CSS

三、JQ

【JQ+html+css】我的购物车-品优购（案例实现）相关推荐

HTML+CSS+JavaScript实现的品优购项目源代码，包含首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页等
本次项目一共实现了7个界面,包括首页.登录页面.注册页面.商品秒杀页.商品推文页.商品抢购页.商品详情页等界面. 完整代码下载地址:HTML+CSS+JavaScript实现的品优购项目源代码项目展 ...
【HTML CSS】PC端品优购项目效果图和代码
素材及代码品优购首页品优购列表页品优购注册页 [index.html] <!DOCTYPE html> <html lang="zh-CN">& ...
【HTML+CSS】代码：品优购网站
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何错漏或疑问都欢迎在评论区提出.本文是项目练习,目的是熟悉网站开发流程及复习所学知识,网站基本涵盖了所有的HTML和CSS的基础知识. ...
品优购案例之横向列表伪元素的应用
<div class="shortcut_right fr"><ul><li><a href="#">我的订单& ...
H-Builder 品优购-购物车的实现
购物车的大体样式 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset=&quo ...
HTML和CSS实现品优购首页
HTML和CSS实现品优购首页效果图如下: 1.HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-CN"><h ...
品优购网页制作（HTML和css内容）
品优购前期准备书写对应页面首页列表页注册页后话前期准备 1.准备一个大的文件夹,里面包括若干小的文件夹. 2.小的文件夹分为: css-----存储初始化样式以及各个页面的样式 imag ...
大学web基础期末大作业~仿品优购商城页面制作(HTML+CSS+JavaScript)
HTML网页设计期末课程大作业~~仿品优购页面制作(HTML+CSS+JavaScript) 关于HTML期末网页制作,大作业A+水平 ~仿品优购网页作业HTML+CSS+JavaScript实现,共 ...
CSS综合案例-品优购电商04
目录 1. 品优购项目(四) 1). 详情页 detail.html 常用单词 2). 面包屑导航 3). 产品介绍模块 4). 预览区域制作 3.1 preview_list 制作 5). 产品详 ...

【JQ+html+css】我的购物车-品优购（案例实现）

前言

一、HTML

二、CSS

三、JQ

总结

【JQ+html+css】我的购物车-品优购（案例实现）相关推荐

最新文章

热门文章