<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> .list{ display:block; width:300px; height:20px; border:solid 1px #cccccc; margin: 5px 0; } .add{ display: block; height: 20px; width: 230px; float: left; } .index{ display:block; width:30px; height: 20px; float: left; border: solid 1px red; } .check{ display:block; width:30px; height: 20px; float: right; border: solid 1px red; } .price{ color: red; } #totalPrice{ display: block; width:300px; height: 30px; position: absolute; bottom:5px; border: solid 1px #cccccc; text-align: center; } .num_v{ width:20px; } </style> <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
<script type="text/javascript"> //+ - function add(obj) { var i = $('.b_add').index(obj); addCar($($('.pro_c')[i]).text(), $($('.price_c')[i]).text(), 1); numInd(i, 1); } function minus(obj) { var i = $('.b_minus').index(obj); addCar($($('.pro_c')[i]).text(), $($('.price_c')[i]).text(), -1); numInd(i, -1); } //添加商品 function addCar(pro, price, num) { var ind = inArray($('.pro_c'), pro); if (ind) { ind = ind - 1; $($('.num_v')[ind]).val(parseInt($($('.num_v')[ind]).val()) + num); if (parseInt($($('.num_v')[ind]).val()) == 0) { delpro(pro); } } else { $('#checkout ul').append('<li><span class="pro_c">' + pro + '</span>---<span class="num_c"><a href="#" onclick="add(this)" class="b_add">+</a><input type="text" class="num_v" value="' + num + '"/><a href="#" onclick="minus(this)" class="b_minus">-</a></span>--------¥<span class="price_c">' + price + '</span></li>'); $('#shopCar').val(parseInt($('#shopCar').val()) + 1); } total(); } //创建购物车 function createCar(pro, price, num) { //清空内容 $('#checkout').html(''); //创建商品目录 $('#checkout').append('<ul><li><span class="pro_c">' + pro + '</span>---<span class="num_c"><a href="#" onclick="add(this)" class="b_add">+</a><input type="text" class="num_v" value="' + num + '"/><a href="#" onclick="minus(this)" class="b_minus">-</a></span>--------¥<span class="price_c">' + price + '</span></li></ul>'); //数量索引 //创建总价 $('#checkout').append('<span id="totalPrice"></span>'); //标示状态 $('#shopCar').val(1); //计算总价 total(); } //删除商品 function delpro(pro) { var off = confirm('确认删除'); if (off) { $($('#checkout ul li:contains(' + pro + ')')).remove(); $('#shopCar').val(parseInt($('#shopCar').val()) - 1); } if (parseInt($('#shopCar').val()) <= 0) { $('#checkout').html(''); $('#checkout').html('<p>空空如也,连颗老鼠屎都没有!</p>'); $('#shopCar').val('none'); } } //数量索引 function numInd(ind, num) { if ($($('.index')[ind]).html() == '') { $($('.index')[ind]).html(1); } else { $($('.index')[ind]).html(parseInt($($('.index')[ind]).html()) + num); if ($($('.index')[ind]).html() == 0) { $($('.index')[ind]).html(''); } } } //计算价格 function total() { var total = 0; for (var i = 0; i < $('.pro_c').length; i++) { total = total + parseInt($($('.num_v')[i]).val()) * parseInt($($('.price_c')[i]).text()); } $('#totalPrice').html('¥' + total); } function inArray(arr, val) { for (var i = 0; i < arr.length; i++) { if ($(arr[i]).text() == val) { return i + 1; } } return false; } $(function() { //初始化 $('#shopCar').val('none'); $('.add').each(function(i) { //商品列表触发点击事件 $(this).click(function() { //判断结算台是否为空 if ($('#shopCar').val() == 'none') { createCar($($('.pro')[i]).text(), $($('.price')[i]).text(), 1); numInd(i, 1); } else { addCar($($('.pro')[i]).text(), $($('.price')[i]).text(), 1); numInd(i, 1); } }); }); //减少商品数量 $('.index').each(function(i) { $(this).click(function() { var ind = inArray($('.pro_c'), $($('.pro')[i]).text()); if (ind) { addCar($($('.pro')[i]).text(), $($('.price')[i]).text(), -1); numInd(i, -1); } else { if ($('#shopCar').val() == 'none') { createCar($($('.pro')[i]).text(), $($('.price')[i]).text(), 1); numInd(i, 1); } else { addCar($($('.pro')[i]).text(), $($('.price')[i]).text(), 1); numInd(i, 1); } } }); }); //删除商品 $('.check').each(function(i) { $(this).click(function() { var ind = inArray($('.pro_c'), $($('.pro')[i]).text()); if (ind) { delpro($($('.pro')[i]).text()); } else { if ($('#shopCar').val() == 'none') { createCar($($('.pro')[i]).text(), $($('.price')[i]).text(), 1); } else { addCar($($('.pro')[i]).text(), $($('.price')[i]).text(), 1); } } }); }); }) </script> </head> <body> <div style="400px;height:400px;border:solid 1px #cccccc;float:left;margin:0 40px;"> <ul> <li class="list"> <span class="index"></span><span class="add"><span class="pro">商品1</span>---¥<span class="price">23</span></span><span class="check"></span> </li> <li class="list"> <span class="index"></span><span class="add"><span class="pro">商品2</span>---¥<span class="price">41</span></span><span class="check"></span> </li> <li class="list"> <span class="index"></span><span class="add"><span class="pro">商品3</span>---¥<span class="price">36</span></span><span class="check"></span> </li> <li class="list"> <span class="index"></span><span class="add"><span class="pro">商品4</span>---¥<span class="price">1000</span></span><span class="check"></span> </li> </ul> </div> <div style="300px;min-height:300px;border:solid 1px #cccccc;float:left;margin:0 40px;text-align: center;position:relative;"> <!--使用hidden 储存数据--> <input type="hidden" id="shopCar" value="none"/> <h4>购物车</h4> <div id="checkout" style="300px;min-height:250px"> <p>空空如也,连颗老鼠屎都没有!</p> </div> </div> </body> </html>