js实现购物车效果

最新推荐文章于 2023-06-30 11:11:40 发布
最新推荐文章于 2023-06-30 11:11:40 发布
阅读量648 收藏 5
点赞数 4
分类专栏： 前端 文章标签： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42534724/article/details/110550093
版权

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css.css">
    <script src="js.js"></script>
</head>
<body>

<table border="1px" cellpadding="0" cellspacing="0">
    <thead>
    <th>序号</th>
    <th>商品名称</th>
    <th>数量</th>
    <th>单价</th>
    <th>小计</th>
    <th>操作</th>
    </thead>
    <tbody id="tbody">
    <tr>
        <td class="xuhao"></td>
        <td>烤煎饼</td>
        <td>
            <input type="button" value="-" onclick="count('-',this)">
            <input type="number" value="3" class="num"/>
            <input type="button" value="+" onclick="count('+',this)">
        </td>
        <td>单价：
            <input type="number" value="2" class="price"/>
        </td>
        <td>小计：
            <input type="number" class="sum"/>
        </td>
        <td><input type="button" value="删除" onclick="remove(this)"></td>
    </tr>
    <tr>
        <td class="xuhao"></td>
        <td>珍珠奶茶</td>
        <td>
            <input type="button" value="-" onclick="count('-',this)">
            <input type="number" value="3" class="num"/>
            <input type="button" value="+" onclick="count('+',this)">
        </td>
        <td>单价：
            <input type="number" value="3.5" class="price"/>
        </td>
        <td>小计：
            <input type="number" class="sum"/>
        </td>
        <td><input type="button" value="删除" onclick="remove(this)"></td>
    </tr>
    <tr>
        <td class="xuhao"></td>
        <td>羊肉串</td>
        <td>
            <input type="button" value="-" onclick="count('-',this)">
            <input type="number" value="3" class="num"/>
            <input type="button" value="+" onclick="count('+',this)">
        </td>
        <td>单价：
            <input type="number" value="1.5" class="price"/>
        </td>
        <td>小计：
            <input type="number" class="sum"/>
        </td>
        <td><input type="button" value="删除" onclick="remove(this)"></td>
    </tr>
    <tr>
        <td class="xuhao"></td>
        <td>牛头</td>
        <td>
            <input type="button" value="-" onclick="count('-',this)">
            <input type="number" value="3" class="num"/>
            <input type="button" value="+" onclick="count('+',this)">
        </td>
        <td>单价：
            <input type="number" value="10" class="price"/>
        </td>
        <td>小计：
            <input type="number" class="sum"/>
        </td>
        <td><input type="button" value="删除" onclick="remove(this)"></td>
    </tr>
    <tr>
        <td class="xuhao"></td>
        <td>烧刀子</td>
        <td>
            <input type="button" value="-" onclick="count('-',this)">
            <input type="number" value="3" class="num"/>
            <input type="button" value="+" onclick="count('+',this)">
        </td>
        <td>单价：
            <input type="number" value="1.8" class="price"/>
        </td>
        <td>小计：
            <input type="number" class="sum"/>
        </td>
        <td><input type="button" value="删除" onclick="remove(this)"></td>
    </tr>
    <tr>
        <td class="xuhao"></td>
        <td>花生米</td>
        <td>
            <input type="button" value="-" onclick="count('-',this)">
            <input type="number" value="3" class="num"/>
            <input type="button" value="+" onclick="count('+',this)">
        </td>
        <td>单价：
            <input type="number" value="3" class="price"/>
        </td>
        <td>小计：
            <input type="number" class="sum"/>
        </td>
        <td><input type="button" value="删除" onclick="remove(this)"></td>
    </tr>
    <tr>
        <td colspan="6">
            商品一共 <span id="sum_cou"></span> 件；共计花费 <span id="sum_price"></span> 元；其中最贵的商品单价是 <span
                id="max_price"></span>元
        </td>
    </tr>

    </tbody>
</table>
</body>
</html>

css代码

table {
    text-align: center;
    width: 1000px;
    margin: 0 auto;
}

thead {
    background-color: skyblue;
}

tr {
    height: 40px;
}

form table {
    text-align: left;
    width: 100px;
}

input[type="number"] {
    width: 50px;
    border: 0;
    text-align: center;
    font-size: 18px;
}

js代码

function update_sum() {//更新最后一行总数，总价格，单价最大
    var num = document.getElementsByClassName('num');
    var price = document.getElementsByClassName('price');
    var sum = document.getElementsByClassName('sum');
    var sum_cou = document.getElementById('sum_cou');
    var sum_price = document.getElementById('sum_price');
    var max_price = document.getElementById('max_price');
    var cou = 0, pri = 0, max_p = 0;
    for (let i = 0; i < num.length; i++) {
        sum[i].value = Number(num[i].value) * Number(price[i].value);
        cou += Number(num[i].value);
        pri += Number(sum[i].value);
        if (max_p < Number(price[i].value)) {
            max_p = Number(price[i].value);
        }
    }
    sum_cou.innerHTML = cou;
    sum_price.innerHTML = pri;
    max_price.innerHTML = max_p;
}

function update_xuhao() {//更新序号
    var xuhao = document.getElementsByClassName('xuhao');
    for (let i = 0; i < xuhao.length; i++) {
        xuhao[i].innerHTML = i + 1;
    }
}

window.onload = function () {
    update_sum();
    update_xuhao();
};

function count(a, obj) {//数量的加减
    var parentNode = obj.parentNode.parentNode;
    var childNodes = parentNode.childNodes;
    var num = childNodes[5].childNodes[3];
    var price = childNodes[7].childNodes[1];
    var sum = childNodes[9].childNodes[1];
    var sum_cou = document.getElementById('sum_cou');
    var sum_price = document.getElementById('sum_price');
    var max_price = document.getElementById('max_price');
    switch (a) {
        case '+':
            var b = Number(num.value);
            num.value = b + 1;
            sum.value = Number(num.value) * Number(price.value);
            sum_cou.innerHTML = Number(sum_cou.innerHTML) + 1;
            sum_price.innerHTML = Number(sum_price.innerHTML) + Number(price.value);//总价格加上单价
            break;
        case '-':
            num.value -= 1;
            sum.value = Number(num.value) * Number(price.value);
            sum_cou.innerHTML = Number(sum_cou.innerHTML) - 1;//总数量减一
            sum_price.innerHTML = Number(sum_price.innerHTML) + Number(price.value);//总价格减去单价
            break;
    }
}

function remove(obj) {//删除当前行
    var tbody = document.getElementById('tbody');
    if (confirm("确定要删除吗？")) {
        tbody.removeChild(obj.parentNode.parentNode);
    }
    update_xuhao();
    update_sum();
}

运行结果
当点击“+”或“-”，会进行小计以及下面一行的更新，当点击删除，会删除当前行，并对序号进行重新排序以及下面一行的总信息更新。。
在这里插入图片描述

_码到成功_
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js淘宝购物车代码.zip
07-11
js淘宝加入购物车代码
JS实现简单的购物车
dxn16638400024的博客
06-30 2599
中是否已经有该产品，有的话数量加一并更新，没有则创建一个新对象并添加到购物车列表中。同时，每次添加或删除购物车物品后都需要更新购物车总计。最后，点击结算按钮后将购物车清空并重置总金额。作为购物车中的物品，它的键是产品 ID，值是包含产品信息的对象。添加至购物车时，首先检查。由于是实现基本的功能，就不弄得多复杂了，代码可以直接Ctrl+c/v，大家可以试一试！这个简单的购物车实现使用了一个对象。
js实现购物车，原理简单，代码解释--＞详细
hnspystqxskzlqc的博客
04-06 8956
大家在淘宝或者京东购物时，看到在选中全选按钮，或者其他商品选中，从而触发全选按钮是怎么实现的吗？ 单商品的价格计算随着数量的增多减少而上升或者下降吗？ 总价随着每个商品的价格相加或相减，而变化吗？ 来看看下面的代码吧，实现以上所有功能。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <bo
js实现简单购物车
zhang_sir5768的博客
10-09 7755
介绍下如何使用js实现简单的购物车 功能如下：点击相应按钮，数量和价格会进行加减，点击相应的单选项，会将价钱显示到下面，全选按钮以及总价格。 代码如下： 小白，轻点喷。 ......
js实现购物车
m0_73481765的博客
06-30 3029
我们也添加了一个加入购物车的按钮，当这个按钮被点击时，我们会调用一个名为addToCart的函数。当用户点击“加入购物车”按钮时，商品将被添加到购物车中，并且购物车中商品的数量和总价将显示在HTML页面上。接下来，我们需要显示商品列表。我们将使用JavaScript循环遍历商品数组，并将每个商品的名称、价格和图片添加到HTML页面中。这个函数首先清空购物车HTML中的内容，然后遍历购物车数组，并将每个购物车物品的名称、价格和数量添加到HTML中。这个函数将从商品数组中取出商品，并将它添加到购物车数组中。
javascript实现购物车效果.zip
07-11
实现效果： ... javascript实现购物车效果,通过原生js代码实现购物车效果，一般电商网站或者商城网站会使用到购物车的效果，点击加减，总价随之变化，选中商品，点击删除，可以删除选中的商品！
JavaScript实现购物车基本功能
10-19
主要为大家详细介绍了JavaScript实现购物车的基本功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js实现购物车
01-18
原生就js实现购物车增删改查，供大家参考，具体内容如下 效果图： 代码： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title></title> <style type=text/css&...
基于JavaScript实现购物车功能
10-20
主要为大家详细介绍了基于JavaScript实现购物车功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript实现类似淘宝的购物车效果
10-20
主要介绍了JavaScript实现购物车特效的相关资料，文中通过示例代码详细介绍了，利用Javascript如何实现类似淘宝购物车中商品的单选、全选、删除、修改等功能，需要的朋友可以参考借鉴，下面来一起看看吧。
JS代码写简单购物车
m0_64054560的博客
05-21 1933
初学者菜鸟编写简单的购物车样式，实现点击按钮增加删除操作，点击删除按钮，删除整行。
js实现简单的购物车 有图有代码
weixin_47485418的博客
05-18 1万+
用JavaScript实现静态购物车功能 要求： 点击+号数量增加，点击-号数量递减； 实现全选、反选和删除功能； 求出小计、总数量和总价； 看效果图 CSS样式 <style> table{ width: 900px; border-collapse: collapse; margin: 0 auto; } th{ border-to
javascript购物车详解实现购物车完整功能(附效果图，完整代码)
热门推荐
笨鸟学飞的博客
08-11 4万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。
【JavaScript】实现简易购物车
浅陌繁星的博客
01-19 5829
本文主要分享一个简易的使用JavaScript编写的购物车。功能实现了：全选、清空购物车、删除单条商品、数据渲染、总价格计算、删除选中物品、添加和减少商品数量并且实现了操作数据后在浏览器本地永久存储。
JavaScript购物车的实现
qq_44061998的博客
04-03 926
购物车实现
纯JS实现购物车&jQuery实现购物车
m0_74315688的博客
03-29 1253
JavaScript购物车。
纯原生 js 实现 简易 购物车
bangeshengtang的博客
08-11 885
代码 纯原生 js 实现 简易 购物车。
js写购物车
weixin_53366569的博客
04-01 396
js编写的购物车
购物车——js小项目实例
u013430418的博客
09-08 4589
短短几周，js阶段的学习已然结束，结课作业就是实现一个购物车功能
javascript购物车实现的效果
最新发布
08-13
JavaScript购物车实现的效果可以非常丰富和实用。通过使用JavaScript编写的购物车功能，可以构建一个类似于电子商务网站中常见的购物车系统。 首先，在网页的商品列表中，通过JavaScript代码将每个商品的信息进行绑定和处理。当用户点击将商品添加到购物车按钮时，JavaScript将捕获用户的点击事件，并从商品列表中获取相关信息，例如商品的id、名称、价格以及数量等。 接下来，JavaScript会将获取到的商品信息保存到一个购物车对象中，这个购物车对象可以是一个数组或者是一个json对象。购物车对象会在用户点击添加商品按钮时实时更新，以反映当前购物车中的商品情况。 同时，JavaScript还会对购物车进行一些额外的处理。例如，当用户点击购物车图标时，JavaScript会将购物车对象中的商品信息动态显示在购物车弹窗中，包括商品的名称、价格和数量等。用户还可以在购物车中修改商品数量、删除商品或者清空购物车等操作。 此外，JavaScript还可以实现一些购物车的功能增强。例如，当用户修改商品的数量时，JavaScript会自动更新购物车中的商品总价和数量，并将其实时展示给用户。另外，JavaScript还可以对购物车中的商品进行排序、搜索和筛选等操作，以提供更好的用户体验。 总之，通过使用JavaScript实现购物车功能，我们可以实现一个用户友好、交互性强的购物车系统，为用户提供便捷、高效的购物体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_码到成功_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值