之前面试的时候, 有被问到, 购物车结算如何实现, 简单说一下自己的看法, 当时没有说出来, 后来通过查询整合资料, 写出了这么一个简单的结算页面.
cart.html 页面代码如下:
html 代码
- <!doctype html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport"
- content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Shopping Cart Demo</title>
- <style>
- .one-shop,.all-total{
- margin-top: 30px;
- }
- .one-goods,.shop-total,.shop-msg{
- margin-top: 20px;
- }
- .shop-total-amount,.shop-msg{
- color: red;
- }
- .minus,.plus{
- cursor: pointer;
- }
- .minus.disabled,.plus.disabled{
- background-color: #ccc;
- border: 1px solid #ccc;
- cursor: default;
- }
- </style>
- </head>
- <body>
- <div class="one-shop">
- <div class="one-goods">
- <input type="checkbox" class="goods-check goodsCheck">
- <button class="minus">-</button>
- <input type="text" class="num-text" value="1" onkeyup="value=this.value.replace(/\D+/g,'')">
- <button class="plus">+</button>
- <span> 商品单价:<span class="shop-total-amount goodsPrice">20.00</span></span>
- <span> 商品总价:<span class="shop-total-amount tolGoodsPrice">20.00</span></span>
- </div>
- <div class="one-goods">
- <input type="checkbox" class="goods-check goodsCheck">
- <button class="minus">-</button>
- <input type="text" class="num-text" value="1">
- <button class="plus">+</button>
- <span> 商品单价:<span class="shop-total-amount goodsPrice">9.90</span></span>
- <span> 商品总价:<span class="shop-total-amount tolGoodsPrice">9.90</span></span>
- </div>
- <div class="shop-total">
- <input type="checkbox" class="goods-check shopCheck">
店铺全选 本店合计: <span class="shop-total-amount shopTotal">0.00</span>
- </div>
- </div>
- <div class="one-shop">
- <div class="one-goods">
- <input type="checkbox" class="goods-check goodsCheck">
- <button class="minus">-</button>
- <input type="text" class="num-text" value="1">
- <button class="plus">+</button>
- <span> 商品单价:<span class="shop-total-amount goodsPrice">14.90</span></span>
- <span> 商品总价:<span class="shop-total-amount tolGoodsPrice">14.90</span></span>
- </div>
- <div class="one-goods">
- <input type="checkbox" class="goods-check goodsCheck">
- <button class="minus">-</button>
- <input type="text" class="num-text" value="1">
- <button class="plus">+</button>
- <span> 商品单价:<span class="shop-total-amount goodsPrice">30.00</span></span>
- <span> 商品总价:<span class="shop-total-amount tolGoodsPrice">30.00</span></span>
- </div>
- <div class="shop-total">
- <input type="checkbox" class="goods-check shopCheck">
店铺全选 本店合计: <span class="shop-total-amount shopTotal">0.00</span>
- </div>
- </div>
- <div class="all-total">
- <input type="checkbox" class="goods-check" id="allCheck">
全选 总价合计: <span class="shop-total-amount" id="allPrice">0.00</span>
- </div>
- </body>
- <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
- <script type="text/javascript">
- $('.minus').click(function () {
- var numTxt = $(this).parent().find('.num-text'); // 获取数量 input
- var goodsPri = $(this).parent().find('.goodsPrice').text(); // 获取商品单价
- var goodsTol = $(this).parent().find('.tolGoodsPrice'); // 获取商品总价 选择器
- $(this).parent().find('.plus').removeClass('disabled'); // 去掉 + 号的 disabled 类
- numTxt.val( parseInt(numTxt.val()) - 1 ); // 操作数量减 1 的操作
- goodsTol.text(parseFloat(numTxt.val() * parseFloat(goodsPri)).toFixed(2)); // 根据商品的数量变化更改商品的总价 ** 注意价格相乘太多溢出
- if(numTxt.val() <= 1){ // 当小于等于 1 的时候
- numTxt.val(1);
- $(this).addClass('disabled');
- goodsTol.text(parseFloat( goodsPri));
- }
- totalPrice();
- });
- $('.plus').click(function () {
- var numTxt = $(this).parent().find('.num-text');
- var goodsPri = $(this).parent().find('.goodsPrice').text(); // 获取商品单价
- var goodsTol = $(this).parent().find('.tolGoodsPrice'); // 获取商品总价 选择器
- $(this).parent().find('.minus').removeClass('disabled'); // 去掉 - 号的 disabled 类
- numTxt.val( parseInt(numTxt.val()) + 1 );
- goodsTol.text(parseFloat(numTxt.val() * parseFloat(goodsPri)).toFixed(2)); // 根据商品的数量变化更改商品的总价
- // 此处可设置不能大于库存数量
- if(numTxt.val()>= 10){
- $(this).addClass('disabled');
- numTxt.val(10);
- }
- totalPrice();
- });
- // 点击商品按钮
- $('.goodsCheck').click(function () {
- var goods = $(this).closest(".one-shop").find('.goodsCheck');// 获取本商店所有商品
- var goodsC = $(this).closest(".one-shop").find('.goodsCheck:checked');// 获取本商店所有被选中商品
- var shopC = $(this).closest(".one-shop").find('.shopCheck');// 获取本商店全选按钮
- if(goods.length == goodsC.length){ // 如果商店的所有商品等于被选中的商品
- shopC.prop('checked',true); // 店铺全选按钮被选中
- if($('.shopCheck').length == $('.shopCheck:checked').length){ // 如果所有店铺全选等于店铺全选被选中的数量
- $('#allCheck').prop('checked',true); // 全选被选中
- totalPrice();
- }else{
- $('#allCheck').prop('checked',false); // 全选不选中
- totalPrice();
- }
- totalPrice();
- }else{
- shopC.prop('checked',false); // 店铺全选按钮不被选中
- $('#allCheck').prop('checked',false); // 全选不选中
- totalPrice();
- }
- });
- // 点击全选店铺按钮
- $('.shopCheck').click(function () {
- if( $(this).prop('checked') == true ){ // 如果该店铺被选中
- $(this).parents('.one-shop').find('.goods-check').prop('checked',true); // 所有商品被选中
- if($('.shopCheck').length == $('.shopCheck:checked').length){ // 如果所有店铺全选等于店铺全选被选中的数量
- $('#allCheck').prop('checked',true); // 全选被选中
- totalPrice();
- }else{
- $('#allCheck').prop('checked',false); // 全选不选中
- totalPrice();
- }
- }else {
- $(this).parents('.one-shop').find('.goods-check').prop('checked',false); // 所有商品不被选中
- $('#allCheck').prop('checked',false); // 全选不选中
- totalPrice();
- }
- });
- // 全选按钮被选中
- $('#allCheck').click(function () {
- if( $(this).prop('checked') == true ){ // 如果该店铺被选中
- $('.goodsCheck').prop('checked',true); // 所有商品被选中
- totalPrice();
- }else {
- $('.goodsCheck').prop('checked',false); // 所有商品不被选中
- totalPrice();
- }
- $('.shopCheck').click(); // 执行店铺全选的操作
- });
- function totalPrice() {
- var allPri = 0;
- $('.one-shop').each(function () { // 遍历商店
- var shopPri = 0;
- $(this).find('.goodsCheck').each(function () { // 遍历商店的商品
- if($(this).is(':checked') == true){
- var num = parseInt($(this).parents(".one-goods").find('.num-text').val()); // 获取商店每一样商品的数量
- var price = parseFloat($(this).parents(".one-goods").find('.goodsPrice').text()); // 获取商店每一样商品的单价
- var goodsPri = num * price;
- shopPri += goodsPri; // 计算被选中店铺的所有商品的总价
- }
- $(this).closest('.one-shop').find('.shopTotal').text(shopPri.toFixed(2)); // 显示被选中商品的店铺总价
- });
- var oneprice = parseFloat($(this).find(".shopTotal").text()); // 得到每个店铺的总价
- allPri += oneprice; // 计算所有店铺的总价
- });
- $('#allPrice').text(allPri.toFixed(2)); // 输出全部价格
- }
- // 键盘输入数量, 更改该商品的总价
- $(".num-text").keyup(function(){
- if(isNaN($(this).val()) || parseInt($(this).val())<1){ // 对输入无效或者小于 1 的进行验证
- $(this).val("1");
- $(this).parent().find('.tolGoodsPrice').text($(this).parent().find('.goodsPrice').text());
- return;
- }
- else if( $(this).val() == ''){ // 当退格时候, 总价就为单价
- $(this).parent().find('.tolGoodsPrice').text($(this).parent().find('.goodsPrice').text());
- }
- else {
- var total = parseFloat($(this).parent().find('.goodsPrice').text()) * parseInt($(this).val());
- $(this).parent().find('.tolGoodsPrice').text(total.toFixed(2));
- totalPrice();
- }
- });
- // 当没有输入数量时, 默认填上数字 1
- $(".num-text").blur(function(){
- if($(this).val() == ''){
- $(this).val("1");
- $(this).parent().find('.tolGoodsPrice').text($(this).parent().find('.goodsPrice').text());
- totalPrice();
- }
- });
- </script>
- </html>
如果有什么 bug, 欢迎大家提出来, 我们一起讨论解决~~
多谢围观
呃呃呃, 不知道说什么了, 第一篇网络笔记
来源: http://www.qdfuns.com/article/46450/c0f2f7692fa142ac9fbf4661f3443126.html