淘宝购物车效果（加，减，删除，全选）

效果：

页面需要引入jquery，ArtTemplate

页面用假数据进行渲染

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}a{color: #666;text-decoration: none;}body{padding:20px;color: #666;}.fl{float: left;}.fr{float: right;}table{border-collapse: collapse;border-spacing: 0;border: 0;text-align: center;width: 937px;}th,td{border: 1px solid #cadeff;}th{background: #e2f2ff;border-top: 3px solid #a7cbff;height: 30px;}td{padding: 10px;color: #444;}tbody tr:hover{background: RGB(238,246,255);}.checkbox{width: 60px;}.goods{width: 300px;}.goods span{width: 180px;margin-top: 20px;text-align: left;float: left;}.price{width: 130px;}.count{width: 90px;}.count .add, .count input, .count .reduce{float: left;margin-left: -1px;position: relative;z-index: 0;}.count .add, .count .reduce{height: 23px;width: 17px;border: 1px solid #e5e5e5;background: #f0f0f0;text-align: center;line-height: 23px;color: #444;}.count .add:hover, .count .reduce:hover{color: #f50;z-index: 3;border-color: #f60;cursor: pointer;}.count input{width: 50px;height: 15px;line-height: 15px;border: 1px solid #aaa;color: #343434;text-align: center;padding: 4px 0;background-color: #fff;z-index: 2;}.subtotal{width: 150px;color: red;font-weight: bold;}.operation{width: 80px;}.operation span:hover, .a:hover{cursor: pointer;color: red;text-decoration: underline;}img{width: 100px;height: 80px;margin-right: 10px;float: left;}.foot{width: 935px;margin-top: 10px;color: #666;height: 48px;border: 1px solid #c8c8c8;background-image: linear-gradient(RGB(241,241,241),RGB(226,226,226));position: relative;z-index: 8;}.foot div, .foot a{line-height: 48px;height: 48px;}.foot .select-all{width: 100px;height: 48px;line-height: 48px;padding-left: 5px;color: #666;}.foot .closing{border-left: 1px solid #c8c8c8;width: 100px;text-align: center;color: #000;font-weight: bold;background: RGB(238,238,238);cursor: pointer;}.foot .total{margin: 0 20px;cursor: pointer;}.foot #priceTotal, .foot #selectedTotal{color: red;font-family: "微软雅黑";font-weight: bold;}.foot .select{cursor: pointer;}.foot .select .arrow{position: relative;top: -3px;margin-left: 3px;}.foot .select .down{position: relative;top: 3px;display: none;}.show .select .down{display: inline;}.show .select .up{display: none;}.foot .select:hover .arrow{color: red;}.foot .selected-view{width: 935px;border: 1px solid #c8c8c8;position: absolute;height: auto;background: #fff;z-index: 9;bottom: 48px;left: -1px;display: none;}.show .selected-view{display: block;}.foot .selected-view div{height: auto;}.foot .selected-view .arrow{font-size: 16px;line-height: 100%;color: #c8c8c8;position: absolute;right: 330px;bottom: -9px;}.foot .selected-view .arrow span{color: #fff;position: absolute;left: 0;bottom: 1px;}#selectedViewList{padding: 20px;margin-bottom: -20px;}#selectedViewList div{display: inline-block;position: relative;width: 100px;height: 80px;border: 1px solid #ccc;margin: 10px;}#selectedViewList div span{display: none;color: #fff;font-size: 12px;position: absolute;top: 0;right: 0;width: 60px;height: 18px;line-height: 18px;text-align: center;background: RGBA(0,0,0,.5);cursor: pointer;}#selectedViewList div:hover span{display: block;}</style>
</head><body><form action=""><table id="cartTable"><thead><tr><th><label><input class="check-all check" type="checkbox" /> 全选</label></th><th>商品</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr></thead><tbody id="J_newsListContainer"><script id="ListContainer" type="text/html">{{each list as value i}}<tr><td class="checkbox"><input class="check-one check" type="checkbox" /></td><td class="goods"><img src="data:images/1.jpg" alt="" /><span>{{value.name}}</span></td><td class="price">{{value.price}}</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="{{value.num}}" /><span class="add">+</span></td><td class="subtotal">{{value.price * value.num}}</td><td class="operation"><span class="delete">删除</span></td></tr>{{/each}}</script><!--   <tr><td class="checkbox"><input class="check-one check" type="checkbox" /></td><td class="goods"><img src="data:images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td><td class="price">3888.50</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">3888.50</td><td class="operation"><span class="delete">删除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox" /></td><td class="goods"><img src="data:images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td><td class="price">1428.50</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">1428.50</td><td class="operation"><span class="delete">删除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox" /></td><td class="goods"><img src="data:images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td><td class="price">640.60</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">640.60</td><td class="operation"><span class="delete">删除</span></td></tr> --></tbody></table><div class="foot" id="foot"><label class=" fl select-all"><input type="checkbox" class="check-all check" /> 全选</label><a class="fl delete" id="deleteAll" href="javascript:;" rel="external nofollow" >删除</a><div class="fr closing">结 算</div><div class="fr total">合计：￥<span id="priceTotal">0.00</span></div><div class="fr select" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div><div class="selected-view"><div id="selectedViewList" class="clearfix"><div><img src="data:images/1.jpg"><span>取消选择</span></div></div><span class="arrow">◆<span>◆</span></span></div></div></form>
</body></html></html>
<script src="react-demos-master/build/jquery.min.js"></script>
<script src="ArtTemplate.js"></script>
<script src="index.js"></script>

//index.jsvar index = {proList: [{ "name": 'Casio/卡西欧 EX-TR350', "price": 20, "num": 1 },{ "name": '大衣', "price": 37.4, "num": 1 },{ "name": '手套', "price": 85.00, "num": 2 },{ "name": '袜子', "price": 12.00, "num": 2 },{ "name": '佳能 PowerShow', "price": 100, "num": 1 },{ "name": '索尼 DSC-WX300', "price": 120.22, "num": 1 }],init: function() {var self = index;self.renderProList();self.checkAll();self.add();self.reduce();self.delete();},/*渲染商品列表*/renderProList: function() {var self = index;var data = { "list": self.proList };var html = template('ListContainer', data);$('#J_newsListContainer').html(html);},/*全选控制*/checkAll: function() {$("body").on('change', '.check', function() {if ($(this).hasClass("check-all")) { //全选按钮var list = $('#J_newsListContainer tr');var numAll = 0; //总数量var tollAll = 0; //总价格list.each(function(index, value) {var count_input = +($(value).find('.count-input').val());tollAll += count_input;numAll += +($(value).find('.subtotal').html()) * count_input;})if ($(this).prop('checked')) { //选中$(".check-all").prop("checked", true) //下面的全选也选中$("#J_newsListContainer .check").prop("checked", true) //复选框全部选中$("#selectedTotal").html(tollAll)$("#priceTotal").html(numAll)} else { //未选中$(".check-all").prop("checked", false) //下面的全选也不选中$("#J_newsListContainer .check").prop("checked", false) //复选框全部不选中$("#selectedTotal").html(0)$("#priceTotal").html(0)}} else { //单选按钮var all = $("#J_newsListContainer tr").length;var list = $('#J_newsListContainer input:checked');var num = 0;var price = 0;list.each(function(index, value) {var count_input = +($(value).parents("tr").find('.count-input').val());num += count_input;price += +($(value).parents("tr").find('.subtotal').html()) * count_input;})// 单选控制全选if (all == list.length) {$(".check-all").prop("checked", true) //全选选中} else {$(".check-all").prop("checked", false) //全选不选中}if ($(this).prop('checked')) { //选中$("#selectedTotal").html(num)$("#priceTotal").html(price)} else { //未选中$("#selectedTotal").html(num)$("#priceTotal").html(price)}}})},/*加数量*/add: function() {$("#J_newsListContainer").on('click', '.add', function() {var count = $(this).parents('tr').find('.count-input').val();count = +(count) + 1;$(this).parents('tr').find('.count-input').val(count);var list = $('#J_newsListContainer input:checked');var num = 0;var price = 0;list.each(function(index, value) {var count_input = +($(value).parents("tr").find('.count-input').val());num += count_input;price += +($(value).parents("tr").find('.subtotal').html()) * count_input;})$("#selectedTotal").html(num)$("#priceTotal").html(price)})},/*减数量*/reduce: function() {$("#J_newsListContainer").on('click', '.reduce', function() {var count = $(this).parents('tr').find('.count-input').val();if (count > 1) {count = +(count) - 1;$(this).parents('tr').find('.count-input').val(count);var list = $('#J_newsListContainer input:checked');var num = 0;var price = 0;list.each(function(index, value) {var count_input = +($(value).parents("tr").find('.count-input').val());num += count_input;price += +($(value).parents("tr").find('.subtotal').html()) * count_input;})$("#selectedTotal").html(num)$("#priceTotal").html(price)}})},/*删除*/delete: function() {$("#J_newsListContainer").on('click', '.delete', function() {$(this).parents('tr').remove();var list = $('#J_newsListContainer input:checked');var num = 0;var price = 0;list.each(function(index, value) {var count_input = +($(value).parents("tr").find('.count-input').val());num += count_input;price += +($(value).parents("tr").find('.subtotal').html()) * count_input;})$("#selectedTotal").html(num)$("#priceTotal").html(price)})}}index.init();

淘宝购物车效果（加，减，删除，全选）相关推荐

仿淘宝购物车demo---增加和减少商品数量
在上一篇博客中,小编简单的介绍了如何使用listview来实现购物车,但是仅仅是简单的实现了列表的功能,随之而来一个新的问题,买商品的时候,我们可能不止想买一件商品,想买多个,或许有因为某种原因点错了 ...
JQuery和JS怎样实现淘宝购物车的添加和删除？
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
购物车(二)加减删除
依赖 //okhttp compile 'com.squareup.okhttp3:okhttp:3.6.0' compile 'com.squareup.okio:okio:1.11.0' //gs ...
selenium实现自动勾选淘宝购物车并支付
代码如下: from selenium import webdriver import time from pykeyboard import * from pymouse import *brows ...
淘宝购物车页面智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
淘宝购物车前端（JS和Angularjs版本)
今天用HTML和JS实现以下购物车,然后再用Angualrjs再去实现一下购物车的前端实现. 功能页面分析: 既然是做模仿淘宝购物车,肯定要先去分析一下淘宝的购物车页面,自己去淘宝卖了两件东西,看了下 ...
高仿淘宝购物车分分钟让你集成
前言做商城类电商app购物车确实一直是一个难点,为什么难呢? 主要原因呢是他里面的逻辑复杂,然后百度的资源好像都不太理想,好多就是一个简单的listView来实现根本就达不到开发的需求.然后一般 ...
淘宝购物车的测试点有什么？
1.界面测试打开淘宝购物车页面后,页面的布局是否合理,是否完整. 不同卖家的商品在不同的table区域显示,区分明显. 页面的功能按钮可以正常显示. 商品的最下方显示失效宝贝. 页面的最低端显示&q ...
面试高频问题——“淘宝购物车”怎么测试
面试高频问题--"淘宝购物车"怎么测试测试思维依然附上测试任何事物的测试思路: 第一步:梳理产品的核心业务流程:明白这是个什么项目,实现了什么业务,以及是怎么实现的? 这个步骤 ...

淘宝购物车效果（加，减，删除，全选）

淘宝购物车效果（加，减，删除，全选）相关推荐

最新文章

热门文章