购物车案例

已于 2022-02-18 22:23:43 修改
阅读量106 收藏
点赞数
分类专栏： jQ 文章标签： webview elementui javascript
于 2022-02-18 22:16:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66711291/article/details/123012047
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        

        h1{
            text-align: center;
            color: pink;
        }

        li{
            list-style: none;
        }

        .girl{
            width: 30px;
            height: 30px;
        }

        .number{
            width: 30px;
        }

    </style>
    <script src="../jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>你想带谁回家呢？</h1>
    <input type="checkbox" id="all">全选
    <ul>
        <li>
            <input type="checkbox" class="girl">
            <img src="../../../../图片/原神/雷泽.png" alt="">
            <strong>奔狼岭的传说</strong>
            <span>
                <button class="cut">-</button>
                <input type="text" class="number" value="1">
                <button class="add">+</button>
            </span>
            <span>单价</span>
            <i>100</i>
            <span>------合计：</span>
            <b>100</b>
        </li>
        <li>
            <input type="checkbox" class="girl">
            <img src="../../../../图片/原神/可莉.png" alt="">
            <strong>逃跑的太阳</strong>
            <button class="cut">-</button>
            <input type="text" class="number" value="1">
            <button class="add">+</button>
            <span>单价</span>
            <i>160</i>
            <span>------合计：</span>
            <b>160</b>
        </li>
        <li>
            <input type="checkbox" class="girl">
            <img src="../../../../图片/原神/砂糖.png" alt="">
            <strong>无害甜度</strong>
            <button class="cut">-</button>
            <input type="text" class="number" value="1">
            <button class="add">+</button>
            <span>单价</span>
            <i>30</i>
            <span>------合计：</span>
            <b>30</b>
        </li>
        <li>
            <input type="checkbox" class="girl">
            <img src="../../../../图片/原神/甘雨.png" alt="">
            <strong>徇循守月</strong>
            <button class="cut">-</button>
            <input type="text" class="number" value="1">
            <button class="add">+</button>
            <span>单价</span>
            <i>1600</i>
            <span>------合计：</span>
            <b>1600</b>
        </li>
        <hr>
        <div>总数：<span id="num">0</span>-----总价：<span id="sum" style="color: red;">0</span></div>
    </ul>

    <script>
        //点击全选后所有角色都被选中,并修改合计
        jQuery('#all').change(function(){
            jQuery('.girl').prop('checked',jQuery('#all').prop('checked'));

            if(jQuery('#all').prop('checked')==true)
            {
                var prices = [...jQuery('li').find('b')];
                var sum = 0;
    
                prices.forEach(function(item,index){
                    sum = sum + parseInt(item.innerHTML);
                    })
            
                jQuery('#sum').text(sum);}
            else{
                jQuery('#sum').text('0');
                }

            if(jQuery('#all').prop('checked')==true)
            {
                var numbers = [...jQuery('li').find("input[type='text']")];
                var number = 0;

                numbers.forEach(function(item){
                    number = number + parseInt(item.value)
                })
                jQuery('#num').text(number);
            }
            else{
                jQuery('#num').text('0');
                }})
                
        //任意角色取消选中后全选取消
        jQuery('.girl').change(function(){
            if(jQuery(this).prop('checked') == false)
            {
                jQuery('#all').prop('checked',false);
            }    
        })
        //所有角色都被选中后全选也被选中
        jQuery('.girl').change(function(){
            if(jQuery(".girl").not("input:checked").length == 0)
            {
                jQuery('#all').prop('checked',true);
            }     
        })
        //选中或取消后修改价格
        jQuery('.girl').change(function(){
            var on = jQuery(this).index('.girl');
            if(jQuery(this).prop('checked') == false){
                newnum = parseInt(jQuery('#num').text()) - parseInt(jQuery("input[type='text']")[on].value);
                jQuery('#num').text(newnum);
                newsum = parseInt(jQuery('#sum').text()) - parseInt(jQuery("b")[on].innerHTML);
                jQuery('#sum').text(newsum);
            }else{
                newnum = parseInt(jQuery('#num').text()) + parseInt(jQuery("input[type='text']")[on].value);
                jQuery('#num').text(newnum);
                newsum = parseInt(jQuery('#sum').text()) + parseInt(jQuery("b")[on].innerHTML);
                jQuery('#sum').text(newsum);
            }
        })
        //点击+按钮增加数量并修改小计和总计
        jQuery('.add').click(function(){     
            var m = jQuery(this).index('.add');
            nownumber = parseInt(jQuery('.number').eq(m).val());
            jQuery('.number').eq(m).val(nownumber+1);

            var price = parseInt(jQuery('i').eq(m).text());
            var now = parseInt(jQuery('b').eq(m).text());
            jQuery('b').eq(m).text(price+now);

            if(jQuery('.girl')[m].checked == true)
            {
                var num = parseInt(jQuery('#num').text())
                num++;
                jQuery("#num").text(num);

                var sum = parseInt(jQuery('#sum').text())
                sum = sum + price;
                jQuery('#sum').text(sum);   
            }            
        })
        //点击-按钮减少数量并修改小计和总计
        jQuery('.cut').click(function(){
            var m = jQuery(this).index('.cut');
            nownumber = parseInt(jQuery('.number').eq(m).val());
            jQuery('.number').eq(m).val(nownumber-1);

            var price = parseInt(jQuery('i').eq(m).text());
            var now = parseInt(jQuery('b').eq(m).text());
            jQuery('b').eq(m).text(now-price);

            if(jQuery('.girl')[m].checked == true)
            {
                var num = parseInt(jQuery('#num').text())
                num--;
                jQuery("#num").text(num);

                var sum = parseInt(jQuery('#sum').text())
                sum = sum - price;
                jQuery('#sum').text(sum);
            }
            })
    </script>
</body>
</html>

DB_鸠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript购物车案例
weixin_67150631的博客
03-12 3928
JavaScript购物车案例
购物车案例2
weixin_65479202的博客
04-11 1245
运用session实现增删改功能以及分页和结算，购物车功能基本实现！！！
javaScript购物车案例
l18937842167的博客
10-12 1670
javaScript原生购物车代码案例
Vue 购物车案例
iron_nini的博客
11-01 2655
本篇描述 vue实现购物车小案例，有兴趣的小伙伴可以参考一下，小编用了两种方法实现 字符串拼接和过滤器，主要体现在price上 样式代码 <style> .box{ width: 800px; margin: 50px auto; text-align: center; } button{margin: 5px;} </style> 方式一 html
八、购物车案例
付之一笑的专栏
12-28 3326
购物车案例 App.vue App.vue —> Goods.vue 父传子，采用的方式将数据由父组件传递给子组件。 App.vue Goods.vue Goods.vue App.vue Footer.vue App.vue App.vue Footer.vue Goods.vue Counter.vue App.vue eventBus.js
购物车案例ajax,Ajax改购物车示例
weixin_36368715的博客
08-06 734
1.购物车类的设计ShoppingCartItem：书的封装，包括书名，数量，价格三个属性，以及对应的getter和setter方法。ShoppingCart：购物车封装类，items为 Map ,以及加入购物车，得到购物车中书的总数量以及总价格三个函数。2：jsp加入购物车，超链接中带入书名以及价格您已经将加入到购物车中,购物车中有本书,总价格是javahref="${pageContext.r...
Vue 购物车案例 黑马学院
qq_42316056的博客
11-22 2630
Vue 购物车案例 黑马学院 ，购物车作业，vue2.0作业， v-model 数据双向绑定，axios ，计算属性等等。
jquery购物车案例
weixin_43849543的博客
05-03 3703
实现功能： 购物车的商品全选、增减商品数量、修改商品小计、计算商品总额、删除商品、选中商品添加背景 1.购物车的商品全选、计算商品总额 2.全不选 3.增减商品数量、修改商品小计、选中商品添加背景 4.删除商品 删除后： 5.删除所选商品 删除后： 6.清空购物车 清空后： 代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta n
JQuery 购物车案例
qq_29691213的博客
07-08 726
本文介绍用JQuery实现购物车案例相关功能 界面如下 主要功能为： 1.单选全选按钮 当单选按钮全选中时全选按钮也被选中，选中商品高亮效果 2.商品数量++ -- 功能，商品数量输入框功能 删除商品功能。 3.单个商品小计，总商品数量计算，总价计算。 4.清空购物车及删除选中商品。 一.全选功能 //1 全选功能 $('.checkall').change(function () { var check = $(this).prop('checke
前端Vue实现购物车案例
04-08
Vscode编译软件 + 使用Vue实现 购物车页面 使用步骤： 1、下载资源，使用vscode打开 2、在终端里安装所有包 npm i 3、运行项目 npm run serve 4、访问 http://localhost:8080/
vue实现购物车案例
10-15
在本教程中，我们将探讨如何使用Vue.js框架来实现一个购物车案例。Vue.js是一个流行的前端JavaScript框架，它提供了一种声明式的方式来构建用户界面，使得代码更易于理解和维护。 首先，我们看到HTML结构中引入了...
JSP购物车案例
12-29
在这个购物车案例中，模型可能包括商品对象、购物车对象以及处理用户添加、删除商品、计算总价等操作的类。 2. **View（视图）**：视图负责展示数据，通常是指用户看到的网页部分。在JSP购物车中，视图可能由多个...
前端：jQuery,购物车案例
03-28
实现步骤： (1) 使用实现数据渲染 (2)每个+按钮实现数字加1总价更新 (3)每个-按钮实现数字减1总价更新 (4)每个删除按钮实现整行商品删除 ...(7)每一个主体商品复选框被选中的时候判断全选按钮是否需要被选中
纯JS实现前端购物车案例.rar
04-08
购物车案例功能介绍：1、添加购物车，清单库存数量会对应减少，库存不足会警告；2、从购物车删除，库存将返回清单，总价相应变化；3、点击"-"，数量会返回到清单库存；4、点击"+"，清单中库存会减少，库存不足会警告...
购物车案例源码，包含全部代码
03-28
全部源码可自行免费下载，学习，练习 功能：(1) 使用实现数据渲染 (2)每个+按钮实现数字加1总价更新 (3)每个-按钮实现数字减1总价更新 (4)每个删除按钮实现整行商品删除 ...(7)每一个主体商品复选框被选中的时候判断...
ASP.NET购物车案例.zip
03-30
ASP.NET购物车案例是一个基于微软的ASP.NET技术与JavaScript实现的Web应用程序，旨在提供一个基本的在线购物体验。这个案例展示了如何在Web页面上创建一个交互式的购物车，包括商品选择、数量增减以及总价计算等功能...
java购物车案例
10-09
以下是这个购物车案例中的核心知识点： 1. **Servlet基础**：Servlet是Java Web开发中的重要组成部分，它是一个Java类，继承自`javax.servlet.Servlet`或`javax.servlet.http.HttpServlet`，负责处理HTTP请求和响应...
vuex购物车案例代码
最新发布
06-21
Vuex 是一个专为 Vue.js 应用程序设计的状态管理模式，它提供了一种集中存储和管理应用状态的方式，特别适合处理像购物车这样的共享组件状态。下面是一个简单的 Vue.js 和 Vuex 购物车案例代码概览： ```javascript // store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { cart: [], // 存放商品列表 totalPrice: 0, // 总价格 }, mutations: { addItem(item) { this.cart.push(item) this.totalPrice += item.price }, removeItem(index) { this.cart.splice(index, 1) this.totalPrice -= this.cart[index].price }, updateItem(index, updatedItem) { // 更新指定商品信息 this.cart[index] = updatedItem // 如果价格变化，更新总价 if (updatedItem.price !== this.cart[index].price) { this.totalPrice = this.cart.reduce((sum, product) => sum + product.price, 0) } }, clearCart() { this.cart.length = 0 this.totalPrice = 0 }, }, actions: { addToCart({ commit }, item) { commit('addItem', item) }, removeFromCart({ commit }, index) { commit('removeItem', index) }, // 更多动作（如更新商品或清空购物车） }, getters: { getCartItems(state) { return state.cart }, getTotalPrice(state) { return state.totalPrice }, }, }) ``` 在这个例子中，`store/index.js` 文件定义了购物车的状态、更改这些状态的方法（mutations）、与状态交互的动作（actions）以及用于读取状态的 getter。 在组件中，你可以这样使用这个状态： ```html <template> <div> <ul> <li v-for="(item, index) in cart" :key="index"> {{ item.name }} - {{ item.price }} <button @click="removeFromCart(index)">Remove</button> </li> </ul> <p>Total price: {{ totalPrice }}</p> <button @click="addToCart({ name: 'New Item', price: 10 })">Add to Cart</button> </div> </template> <script> import { mapState, mapActions } from 'vuex' export default { computed: { ...mapState(['getCartItems', 'getTotalPrice']), // 从 store 中获取数据 }, methods: { ...mapActions(['addToCart', 'removeFromCart']), // 调用 action }, } </script> ``` 以上代码展示了一个基础的购物车功能，实际项目中可能还需要添加错误处理、分页、商品详情等复杂功能。相关问题： 1. 在Vue中，为什么要使用Vuex来管理购物车？ 2. getters在Vuex中的作用是什么？ 3. 这段代码如何处理购物车中的商品数量变化和价格更新？

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值