js事件实现购物车

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量525 收藏 1
点赞数
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pwsifeng/article/details/122931001
版权

微信：xujie766(学习资源，资料视频)

js事件实现简易购物车

<!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>Document</title>
</head>
<body>
    <table border="1px" cellspacing="0">
        <thead>
            <tr>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>华为Mate50Pro</td>
                <td>
                    <span>7999</span>元
                </td>
                <td>
                    <button class="pop">-</button>
                    <input type="text" value="1" size="2">
                    <button class="add">+</button>
                </td>
                <td>
                    <span class="xj">7999</span>元
                </td>
                <td>
                    <button class="del">删除</button>
                </td>
            </tr>
            <tr>
                <td>小米40Pro</td>
                <td>
                    <span>5999</span>元
                </td>
                <td>
                    <button class="pop">-</button>
                    <input type="text" value="1" size="2">
                    <button class="add">+</button>
                </td>
                <td>
                    <span class="xj">5999</span>元
                </td>
                <td>
                    <button class="del">删除</button>
                </td>
            </tr>
            <tr>
                <td>OppoA76</td>
                <td>
                    <span>2999</span>元
                </td>
                <td>
                    <button class="pop">-</button>
                    <input type="text" value="1" size="2">
                    <button class="add">+</button>
                </td>
                <td>
                    <span class="xj">2999</span>元
                </td>
                <td>
                    <button class="del">删除</button>
                </td>
            </tr>
            <tr>
                <td>荣耀40Pro</td>
                <td>
                    <span>4999</span>元
                </td>
                <td>
                    <button class="pop">-</button>
                    <input type="text" value="1" size="2">
                    <button class="add">+</button>
                </td>
                <td>
                    <span class="xj">4999</span>元
                </td>
                <td>
                    <button class="del">删除</button>
                </td>
            </tr>
            <tr>
                <td>Apple11Pro</td>
                <td>
                    <span>8999</span>元
                </td>
                <td>
                    <button class="pop">-</button>
                    <input type="text" value="1" size="2">
                    <button class="add">+</button>
                </td>
                <td>
                    <span class="xj">8999</span>元
                </td>
                <td>
                    <button class="del">删除</button>
                </td>
            </tr>
            
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    总价：<span class="money"></span>元
                    数量：<span class="count"></span>个
                </td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
<script>
    var otab = document.querySelector('table');
    var omoney = document.querySelector('.money');
    var ocount = document.querySelector('.count');
    otab.onclick = function (evt){
        var e = evt || event;
        if(e.target.className=='pop'){
            //点击的是-
            onPop(e.target);
        }
        if(e.target.className=='add'){
            //点击的是+
            onAdd(e.target)
        }
        if(e.target.className=='del'){
            //点击的是删除
            onDel(e.target)
        }
    }
    // 创建点击-事件
    function onPop(obj) {
        console.log(obj.nextElementSibling.value);
        var num = obj.nextElementSibling.value;
        num--;
        if(num<=1){
            num = 1
        }
        obj.nextElementSibling.value = num;

        var price = obj.parentNode.previousElementSibling.firstElementChild.innerHTML*1;
        // 计算小计 下面是一个有参函数
        getNum(obj,price,num)
        getMoney();
        getNum();
    }

    // 创建点击+事件
    function onAdd(obj){
        var num = obj.previousElementSibling.value;
        num++;
        obj.previousElementSibling.value=num;
        var price = obj.parentNode.previousElementSibling.firstElementChild.innerHTML*1;
        getNum(obj,price,num);
        getMoney();
        getCount()
    }

    // 创建删除事件
    function onDel(obj){
        if(confirm('确定要删除嘛！')){
            obj.parentNode.parentNode.remove();
            getMoney();
            getCount();
        }
    }

    // 创建小计函数
    // (obj,price,num)从上面获取obj点击对象，price价格，num数量
    function getNum(obj,price,num){
        obj.parentNode.nextElementSibling.firstElementChild.innerHTML = price * num;
    }

    // 创建求和函数
    function getMoney(){
        var sum = 0;
        var oxj = document.querySelectorAll('.xj');
        for(var i=0;i<oxj.length;i++){
            sum += parseFloat(oxj[i].innerHTML)
        }
        omoney.innerHTML = sum;
    }

    // 创建求数量函数
    function getCount(){
        var count = 0;
        var oinp = document.querySelectorAll('input');
        for(var i=0;i<oinp.length;i++){
            count+=parseInt(oinp[i].value)
        }
        ocount.innerHTML=count;
    }
</script>
Pwsifeng
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现购物车
Uking201410的博客
06-02 824
getTotal: 获取全选框 获取选择框 用一个for循环判断哪个框被选择了，选择了的话，把单价乘以数量累加到总价格 全选框onclick：效果是全选框被选择了，然后下面的所有选择框都会被选中（for），  同时：总价改变，商品总数改变。如果是取消了全选框则下面的所有选择框都会被取消，  同时：总价改变，商品总数改变。往商品件数div里添加（或删除）该商品的图片 选
js实现购物车效果
sinat_31766075的博客
01-09 3348
在网页中实现动态添加物品的效果. 代码如下:<!DOCTYPE html> <html> <head> <title>购物车</title> <meta charset="utf-8" /> <style type="text/css"> h1 { text-align:center; } table {
纯JS实现购物车&jQuery实现购物车
m0_74315688的博客
03-29 2213
JavaScript购物车。
JS实现简单的购物车
dxn16638400024的博客
06-30 3384
中是否已经有该产品，有的话数量加一并更新，没有则创建一个新对象并添加到购物车列表中。同时，每次添加或删除购物车物品后都需要更新购物车总计。最后，点击结算按钮后将购物车清空并重置总金额。作为购物车中的物品，它的键是产品 ID，值是包含产品信息的对象。添加至购物车时，首先检查。由于是实现基本的功能，就不弄得多复杂了，代码可以直接Ctrl+c/v，大家可以试一试！这个简单的购物车实现使用了一个对象。
【学习笔记46】JavaScript购物车的实现
yizhiyang
11-28 7334
JavaScript购物车的实现
购物车（Js）
m0_62188960的博客
03-27 295
购物车
JS实现购物车特效
10-20
本文主要分享了用JavaScript实现购物车特效的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
原生js实现购物车功能
01-18
本文实例为大家分享了js实现购物车功能的具体代码，供大家参考，具体内容如下 使用html配合原生js实现购物车功能 * 实现购物车商品数量的加减，注意数量最少为1，数量输入仅能为数字 * 实现购物车商品的移除 * 可以...
Javascript操纵Cookie实现购物车程序
10-31
Javascript操纵Cookie实现购物车程序
js实现购物车功能
10-18
JavaScript 实现购物车功能是网页应用中常见的需求，主要用于模拟现实世界中购物车的行为，如添加商品、删除商品、更新商品数量以及结算等。这里我们将探讨三种不同的实现方式，并通过具体的JS代码示例来理解其工作...
原生JS实现购物车本地存储
08-18
利用原生js和本地存储技术实现购物车功能
js使用事件实现简易购物车
BALSAM_PEAR_SAN的博客
03-21 242
<!doctype html> <html> <head> <meta charset="utf-8"> <title>简易购物车</title> <style> .inputs{ width:50px; text-align:...
js购物车功能php,实战项目：用原生JS实现一个购物车的功能
weixin_29728529的博客
03-12 608
实战：购物车功能一、两个实用的数组函数1.1 Array.every()every()方法传入回调函数，这个回调函数有三个参数，分别是：item:用于测试的当前值；index:当前测试值的索引，这是一个可选参数；every:用于测试的数组，这也是一个可选参数。该方法的返回值是一个布尔值，如果回调函数的每一次的测试值返回的结果都是true，那么就返回 true ，否则返回 false。简单理解即：只...
购物车——js小项目实例
u013430418的博客
09-08 4712
短短几周，js阶段的学习已然结束，结课作业就是实现一个购物车功能
纯原生 js 实现 简易 购物车
bangeshengtang的博客
08-11 972
代码 纯原生 js 实现 简易 购物车。
javaScript原生版购物车：全选、单选、全删、商品数量增减、计算总价、添加商品（代码）
小福气的博客
07-06 8144
题目： CSS代码如下： <style> *{ margin:0px; padding:0px; } .header,.content,.floot{ width:800px; margin:0pxauto; } .headerulli,.contentulli{ ...
超详细购物车案例js实现购物车上【2021.10.10】
masierty的博客
10-10 1011
一、前言 本文所用的代码是之前看一个大大所写的，忘记大大名字了，侵权立删。实现购物车的方法有很多，我们不应该把重心放在代码上，而是应该放在功能上和逻辑上，这样再复杂的项目，也能从众多功能中一步一步下手。不会代码我们可以去查，直到实现功能为止。 二、功能 1.全选按钮 点击后反选按钮的状态改为未选中状态 判断点击后是否为选中状态，是则选中所有单选按钮并通过改变classname从而改变背景颜色，否则取消所有单选按钮 2.反选按钮 点击后通过逻辑运算符！改变单选按钮的选中状态 判断...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 346
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
web javascript实现购物车
06-06
实现购物车的基本流程如下： 1. 创建一个空的购物车数组，用于存放商品信息。 2. 在页面中展示商品列表，并为每个商品添加“加入购物车”按钮。 3. 点击“加入购物车”按钮时，获取当前商品的信息（如商品ID、名称、价格等），将其添加到购物车数组中。 4. 在页面中展示购物车列表，包括每个商品的信息以及数量、总价等信息。 5. 实现购物车中商品数量、总价的实时更新，例如增加或减少商品数量时，购物车列表应该实时更新。 6. 实现删除购物车中的商品，同时更新购物车列表和购物车数组。 7. 实现结算功能，包括计算购物车中所有商品的总价、应付款项等信息。 下面是一个简单的示例代码： HTML部分： ``` <!-- 商品列表 --> <div id="product-list"> <div class="product" data-id="1" data-name="商品1" data-price="10.00"> <h3>商品1</h3> <p>价格：10.00元</p> <button class="add-to-cart">加入购物车</button> </div> <div class="product" data-id="2" data-name="商品2" data-price="20.00"> <h3>商品2</h3> <p>价格：20.00元</p> <button class="add-to-cart">加入购物车</button> </div> ... </div> <!-- 购物车列表 --> <div id="cart-list"> <h2>购物车</h2> <table> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>总价</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <div id="cart-summary"> <p>总价：<span id="total-price">0.00</span>元</p> <button id="checkout">结算</button> </div> </div> ``` JS部分： ``` // 购物车数组 var cart = []; // 获取商品列表和购物车列表元素 var productList = document.getElementById('product-list'); var cartList = document.getElementById('cart-list'); // 添加商品到购物车 function addToCart(id, name, price) { // 检查购物车中是否已存在该商品 for (var i = 0; i < cart.length; i++) { if (cart[i].id === id) { cart[i].quantity++; return; } } // 如果购物车中不存在该商品，则添加到购物车数组中 cart.push({ id: id, name: name, price: price, quantity: 1 }); } // 渲染购物车列表 function renderCart() { // 清空购物车列表 cartList.querySelector('tbody').innerHTML = ''; // 遍历购物车数组，生成购物车列表 for (var i = 0; i < cart.length; i++) { var item = cart[i]; var tr = document.createElement('tr'); tr.innerHTML = ` <td>${item.name}</td> <td>${item.price.toFixed(2)}</td> <td>${item.quantity}</td> <td>${(item.price * item.quantity).toFixed(2)}</td> <td><button class="remove-from-cart" data-id="${item.id}">删除</button></td> `; cartList.querySelector('tbody').appendChild(tr); } // 更新总价 var totalPrice = cart.reduce((sum, item) => sum + item.price * item.quantity, 0); document.getElementById('total-price').textContent = totalPrice.toFixed(2); } // 商品列表添加点击事件 productList.addEventListener('click', function(event) { var target = event.target; if (target.classList.contains('add-to-cart')) { var product = target.closest('.product'); var id = product.dataset.id; var name = product.dataset.name; var price = parseFloat(product.dataset.price); addToCart(id, name, price); renderCart(); } }); // 购物车列表添加点击事件 cartList.addEventListener('click', function(event) { var target = event.target; if (target.classList.contains('remove-from-cart')) { var id = target.dataset.id; cart = cart.filter(item => item.id !== id); renderCart(); } }); // 结算按钮添加点击事件 document.getElementById('checkout').addEventListener('click', function(event) { var totalPrice = cart.reduce((sum, item) => sum + item.price * item.quantity, 0); alert(`您需要支付${totalPrice.toFixed(2)}元`); }); ``` 以上代码仅为示例，实际项目中可能需要根据具体需求进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值