【Vue | JQuery | Javascript】入门之实现简易购物车

最新推荐文章于 2024-05-28 18:30:26 发布
最新推荐文章于 2024-05-28 18:30:26 发布
阅读量331 收藏 1
点赞数 1
分类专栏： 代码实例 js交互设计 Vue.js 文章标签： javascript vue.js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37086980/article/details/110237108
版权

 

获取的数量为String类型, 需要用Number进行强制类型转换, 单价不需要转, 因为在乘法中默认转换

函数封装步骤

   1. 创建一个空函数

   2. 重复代码/目标代码放入

   3. 原位置调用

   4. 抽取参数  从上到下一行行抽取可变的数据为参数

   5. 传参调用  把谁抽出来 就把谁传进去

   6. 设置返回值  将函数内要在函数外用的数据返回出去

   7. 接收返回值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        按照可复制的方式进行布局
        1. 先布局一个的样式
     -->
    <ul>
        <li>
            <button>-</button>
            <b>0</b>
            <button>+</button>
            单价：<span>12.5</span>元
            小计: <i>0</i>元
        </li>
        <li>
            <button>-</button>
            <b>0</b>
            <button>+</button>
            单价：<span>125</span>元
            小计: <i>0</i>元
        </li>
        <li>
            <button>-</button>
            <b>0</b>
            <button>+</button>
            单价：<span>175</span>元
            小计: <i>0</i>元
        </li>
        <li>
            <button>-</button>
            <b>0</b>
            <button>+</button>
            单价：<span>10.5</span>元
            小计: <i>0</i>元
        </li>
        <li>
            <button>-</button>
            <b>0</b>
            <button>+</button>
            单价：<span>100</span>元
            小计: <i>0</i>元
        </li>
    </ul>

    <script>
        /* 
            1. 布局: 按照可复制的方式进行布局  先布局一个的样式  复制粘贴改其中的内容
            2. js: 先去实现一行操作的效果
                2.1 获取当前的父元素  复制粘贴的元素  li
                2.2 其中所有的子元素 通过父元素li来获取
                2.3 对应的实现效果
            3. 封装代码
                抽参的时候尽量抽取元素或者属性或者标签名  尽量不要抽取下标为参数
        */
        var lis = document.getElementsByTagName('li');
        console.log(lis);

        // 实现第一个li中的效果
        // m(lis[0]);
        // m(lis[1]);
        // m(lis[2]);
        // m(lis[3]);
        // m(lis[4]);

        // 只有下标改变的时候  用for循环  给每一个li都调用m函数
        for(var i = 0; i < lis.length; i++){
            m(lis[i]);
        }

        // 1. 空函数
        function m(father) {
            /* 
                点击+, 数量+1, 小计跟随改变  小计 = 数量 * 单价
                元素： btn  b  span  i
            */
            var btns = father.getElementsByTagName('button');
            var b = father.getElementsByTagName('b')[0];
            var all = father.getElementsByTagName('i')[0];
            var span = father.getElementsByTagName('span')[0];
            console.log(btns, b, all, span);
            // 点击谁就给谁加事件
            btns[1].onclick = function () {
                // 获取数量
                var num = b.innerHTML;
                num = Number(num) + 1;
                console.log(num);
                // b标签的内容更新
                b.innerHTML = num;
                // 小计里面设置总数
                all.innerHTML = num * span.innerHTML;
            }
            // 减号
            btns[0].onclick = function () {
                // 判断当前数量是几
                // 获取数量
                var num = b.innerHTML;
                // 如果数量是0  后续代码不执行  return
                if (num == 0) {
                    return;
                }
                num = Number(num) - 1;
                console.log(num);
                // b标签的内容更新
                b.innerHTML = num;
                // 小计里面设置总数
                all.innerHTML = num * span.innerHTML;
            }
        }
    </script>
</body>

</html>

 

1.原生JS方式实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-show</title>
</head>
<body>
  <div id="app">
   <h1>简易的购物车</h1>
    <ul id="cart-list">
      
    </ul>
    <h1>总计：￥<span id="total"></span></h1>
  </div>
  <script>
    let appEle = document.querySelector('#app')
    let cart =  [
      {
        id: 1,
        name: 'iphone 12 pro',
        price: 8799,
        number: 1
      },
      {
        id: 2,
        name: '华为 mate 40',
        price: 6799,
        number: 1
      }
    ]
    var html = ''
    var total = 0
    cart.forEach((item,index) => {
      total += item.price * item.number
      html += `<li>
        ${item.name} [￥${item.price.toFixed(2)}]
        <button onClick="reduceNumber(${index})">-</button>
        <span>${item.number}</span>
        <button onClick="addNumber(${index})">+</button>
      </li>`
    })
  
    appEle.querySelector('#cart-list').innerHTML = html
    
    // 计算总金额
    appEle.querySelector('#total').innerHTML = total.toFixed(2)

    function addNumber (index) {
      const ele = event.target
      // 获取前一个元素
      const numberEle = ele.previousElementSibling
      let number = parseInt(numberEle.innerText.trim())
      numberEle.innerText = number + 1
      cart[index].number = number + 1
      // 计算总金额
      countCart()
    }

    function reduceNumber (index) {
      const ele = event.target
      // 获取后一个元素
      const numberEle = ele.nextElementSibling
      let number = parseInt(numberEle.innerText.trim())
      if (number > 1) {
        numberEle.innerText = number - 1
        cart[index].number = number - 1
        // 计算总金额
        countCart()
      }
    }

    function countCart () {
      var total = 0
      cart.forEach((item,index) => {
        total += item.price * item.number
      })
      appEle.querySelector('#total').innerHTML = total.toFixed(2)
    }
  </script>
</body>
</html>

2.JQuery实现简易购物车

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQ实现简易购物车</title>

</head>

<body>
    <div id="app">
        <h3>JQ实现简易购物车</h3>
        <ul id="cartList">
            <!-- <li>
                <button>-</button>
                <b></b>
                <button>+</button>
                <span></span>
            </li> -->
        </ul>
        <p>总价:￥
            <b id="sum"></b>
        </p>
    </div>

</body>
<script src="./jquery.js"></script>
<script>
    var cartArr = [{
        id: 1,
        name: 'iphone 12 pro',
        price: 8799,
        number: 1
    },
    {
        id: 2,
        name: '华为 mate 40',
        price: 6799,
        number: 1
    },
    {
        id: 3,
        name: '优衣库登山外套',
        price: 499,
        number: 1
    },
    {
        id: 4,
        name: 'FILA官方休闲时装运动鞋',
        price: 780,
        number: 1
    }];

    let totalPrice = 0, html = '';
    // 数据渲染页面
    $.each(cartArr, (i, v) => {
        html += `<li>
                <span>${cartArr[i].name}</span>
                ￥<i>${cartArr[i].price}</i>
                <button class="reduce" onclick="reduce(this)">-</button>
                <b>${cartArr[i].number}</b>
                <button class="add" onclick="add(this)">+</button>
            </li>`
        totalPrice += cartArr[i].price
    })
    // 添加给父节点
    $('#cartList').html(html)
    $('#sum').html(totalPrice.toFixed(2))

    //增加按钮
    function add(btn) {
        // console.log($(btn))
        let number = $(btn).prev().html()
        // console.log(number)
        $(btn).prev().html(parseInt(number) + 1)
        let price = $(btn).prev().prev().prev().html()
        // console.log(price)
        totalPrice += parseFloat(price)
        $('#sum').html(totalPrice.toFixed(2))
    }

    function reduce(btn) {
        // console.log($(btn))
        let number = $(btn).next().html()
        if (number == 1) return;
        // console.log(number)
        $(btn).next().html(parseInt(number) - 1)
        let price = $(btn).prev().html()
        // console.log(price)
        totalPrice -= parseFloat(price)
        $('#sum').html(totalPrice.toFixed(2))
    }

</script>

</html>

3.Vue框架实现简易购物车（1）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue实现简易购物车</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
    <h1>Vue实现简易购物车</h1>
    <ul>
        <li v-for="(item, index) of cart" :key="item.id">
            {{item.name}} [￥{{item.price.toFixed(2)}}]
            <button @click="reduceNumber(index)">-</button>
            <span>{{item.number}}</span>
            <button @click="addNumber(index)">+</button>
        </li>
    </ul>
    <h3>总计:￥{{countCart()}}</h3>
</div>

<body>
    <script>
        // 在浏览器当中有一个加号与减号，每按一次加号，数字加一，按一次减号，数字减一，且这个数只能在0-10之间，可以取到0和10；
        new Vue({
            el: '#app',
            data: {
                cart: [
                    {
                        id: 1,
                        name: 'iphone 12 pro',
                        price: 8799,
                        number: 1
                    },
                    {
                        id: 2,
                        name: '华为 mate 40',
                        price: 6799,
                        number: 1
                    },
                    {
                        id: 3,
                        name: '优衣库登山外套',
                        price: 499,
                        number: 1
                    },
                    {
                        id: 4,
                        name: 'FILA官方休闲时装运动鞋',
                        price: 780,
                        number: 1
                    }
                ]
            },
            methods: {
                // 增加商品购买数量
                addNumber(index) {
                    this.cart[index].number++
                },
                // 减少商品购买数量
                reduceNumber(index) {
                    // 如果index对应的商品数量大于1,把index对应的商品数量减1
                    if (this.cart[index].number > 1) {
                        this.cart[index].number--
                    }
                },
                // 计算购物车总金额
                countCart() {
                    let total = 0
                    this.cart.forEach(item => {
                        total += item.price * item.number
                    });
                    return total.toFixed(2)
                }
            }
        })
    </script>
</body>

</html>

4.Vue框架实现简易购物车(2)-计算属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-show</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
   <h1>简易的购物车</h1>
    <ul>
      <li v-for="(item,index) of cart" :key="item.id">
        {{item.name}} [￥{{item.price.toFixed(2)}}]
        <button @click="reduceNumber(index)">-</button>
        <span>{{item.number}}</span>
        <button @click="addNumber(index)">+</button>
      </li>
    </ul>
    <h1>总计：￥{{total}}</h1>
  </div>
  <script>
    // 在浏览器当中有一个加号与减号，每按一次加号，数字加一，按一次减号，数字减一，且这个数只能在0-10之间，可以取到0和10；
    new Vue({
      el: '#app',
      data: {
        cart: [
          {
            id: 1,
            name: 'iphone 12 pro',
            price: 8799,
            number: 1
          },
          {
            id: 2,
            name: '华为 mate 40',
            price: 6799,
            number: 1
          }
        ]
      },
      computed: {
        total () {
          let total = 0
          this.cart.forEach(item => {
            total += item.price * item.number
          })
          return total.toFixed(2)
        }
      },
      methods: {
        // 计算购物车的总金额
        countCart () {
          let total = 0
          this.cart.forEach(item => {
            total += item.price * item.number
          })
          return total.toFixed(2)
        },
        // 增加商品购买数量
        addNumber (index) {
          // 把index对应的商品的数量+1
          this.cart[index].number++
          // 只要数量发生改变，页面就会触发重新渲染，然后就会自动调用countCart()
        },
        // 减少商品购买数量
        reduceNumber (index) {
          // 如果index对应的商品的数量大于1，把index对应的商品的数量-1
          if (this.cart[index].number > 1) {
            this.cart[index].number--
          }
        }
      }
    })
  </script>
</body>
</html>

 

夹心776655
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简易购物车（最全代码解析）JavaScript（ES6面向对象）
CSErtuh的博客
09-08 3914
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>购物车</title> <style type="text/css"> table { width: 50%; position: relative; margin: 0px auto; border-collapse: collapse; ...
JS+Jquery简易购物车
一个开发初学者的博客
03-28 838
小bug请忽略，仅做参考，请勿其他用途
JS实现简单的购物车
dxn16638400024的博客
06-30 3422
中是否已经有该产品，有的话数量加一并更新，没有则创建一个新对象并添加到购物车列表中。同时，每次添加或删除购物车物品后都需要更新购物车总计。最后，点击结算按钮后将购物车清空并重置总金额。作为购物车中的物品，它的键是产品 ID，值是包含产品信息的对象。添加至购物车时，首先检查。由于是实现基本的功能，就不弄得多复杂了，代码可以直接Ctrl+c/v，大家可以试一试！这个简单的购物车实现使用了一个对象。
js实现购物车
m0_73481765的博客
06-30 3905
我们也添加了一个加入购物车的按钮，当这个按钮被点击时，我们会调用一个名为addToCart的函数。当用户点击“加入购物车”按钮时，商品将被添加到购物车中，并且购物车中商品的数量和总价将显示在HTML页面上。接下来，我们需要显示商品列表。我们将使用JavaScript循环遍历商品数组，并将每个商品的名称、价格和图片添加到HTML页面中。这个函数首先清空购物车HTML中的内容，然后遍历购物车数组，并将每个购物车物品的名称、价格和数量添加到HTML中。这个函数将从商品数组中取出商品，并将它添加到购物车数组中。
js实现购物车基本功能
最新发布
m0_71606684的博客
05-28 422
js实现购物车加、减、单选、全选、删除、价格总汇、数量总汇；
【JavaScript】实现简易购物车
浅陌繁星的博客
01-19 6443
本文主要分享一个简易的使用JavaScript编写的购物车。功能实现了：全选、清空购物车、删除单条商品、数据渲染、总价格计算、删除选中物品、添加和减少商品数量并且实现了操作数据后在浏览器本地永久存储。
【学习笔记46】JavaScript购物车的实现
yizhiyang
11-28 7390
JavaScript购物车的实现
用jQuery实现简易购物车
Pwsifeng的博客
03-01 468
微信:xuejie766 (学习资源，视频) 给你一段数据，请把他渲染到页面，并通过jQuery实现购物车部分功能（如：数量变化，价格变化等）。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
shoppingcart:用javascript和jquery实现的购物车
07-05
在这个"shoppingcart:用javascript和jquery实现的购物车"项目中，我们将探讨如何利用这两种强大的前端技术来构建一个交互式的购物车系统。 JavaScript是一种广泛用于网页动态效果的脚本语言，它可以与HTML和CSS结合...
vue购物车商品订单详情页面代码
06-10
在本项目中，“vue购物车商品订单详情页面代码”是一个基于Vue.js框架构建的电子商务应用模块，主要用于展示购物车中的商品订单详情。这个页面包含了多种关键功能，旨在提供用户友好的购物流程体验。以下是对这些...
jQuery学习案例-购物车
03-08
在本文中，我们将深入探讨基于jQuery的购物车实现，特别是在前端开发中的应用。这个学习案例主要关注使用localStorage进行数据持久化存储以及如何有效地利用jQuery进行DOM操作。在现代Web开发中，jQuery是一个广泛...
JavaScript编写一个简易购物车功能
10-21
总的来说，实现JavaScript购物车功能需要HTML提供结构，CSS进行美化，而JavaScript/jQuery则负责动态交互和逻辑处理。通过这个过程，你可以了解到Web前端开发中的数据交互、事件处理和动态更新页面等基本概念。实践...
vue2.0实现购物车功能
06-01
在Vue2.0中实现购物车功能是一项常见的前端开发任务，它涉及到JavaScript（JS）和jQuery特效的应用。在这个项目中，我们看到有多个文件，包括HTML、CSS、JS和图片资源，这些都是构建交互式Web应用的基本元素。接下来...
js实现简单购物车
zhang_sir5768的博客
10-09 7876
介绍下如何使用js实现简单的购物车 功能如下：点击相应按钮，数量和价格会进行加减，点击相应的单选项，会将价钱显示到下面，全选按钮以及总价格。 代码如下： 小白，轻点喷。 ......
javascript购物车详解实现购物车完整功能(附效果图，完整代码)
热门推荐
笨鸟学飞的博客
08-11 4万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。
【简易购物车】JavaScript实现简易购物车页面
陈俊卓的博客
07-08 2415
JavaScript实现简易购物车页面
js写购物车
weixin_53366569的博客
04-01 434
js编写的购物车
[JavaScript实训] -- 制作简易的购物车页面
一只大数据专业的傻猪猪
04-05 1万+
JavaScript实现制作简易的购物车页面
纯JS实现购物车&jQuery实现购物车
m0_74315688的博客
03-29 2253
JavaScript购物车。
使用Vue.js构建购物车结算功能
"这篇文档是关于使用Vue.js模拟实现购物车结算功能的示例代码，主要涉及HTML、CSS和JavaScript的结合使用，以及Vue.js框架的基础应用。" 在实际的Web开发中，Vue.js是一个非常流行的渐进式JavaScript框架，用于构建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值