js实现购物车效果

最新推荐文章于 2024-09-28 23:02:25 发布
最新推荐文章于 2024-09-28 23:02:25 发布
阅读量703 收藏 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();
}

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

_码到成功_
关注
专栏目录
js实现购物车功能
06-14
原生js实现简单购物车功能，方便简单，可直接使用到web
js实现购物车
m0_73481765的博客
06-30 4007
我们也添加了一个加入购物车的按钮，当这个按钮被点击时，我们会调用一个名为addToCart的函数。当用户点击“加入购物车”按钮时，商品将被添加到购物车中，并且购物车中商品的数量和总价将显示在HTML页面上。接下来，我们需要显示商品列表。我们将使用JavaScript循环遍历商品数组，并将每个商品的名称、价格和图片添加到HTML页面中。这个函数首先清空购物车HTML中的内容，然后遍历购物车数组，并将每个购物车物品的名称、价格和数量添加到HTML中。这个函数将从商品数组中取出商品，并将它添加到购物车数组中。
JavaScript实现制作简易购物车
最新发布
2301_82271967的博客
09-28 385
【代码】JavaScript实现制作简易购物车。
JS实现的购物车
weixin_33724059的博客
09-23 94
hoppingCart JScript 文件 //---------------- //read COOKIE function getCookie(cookiename) { var result; var mycookie = document.cookie; var start2 = mycookie.indexOf(cookiename + "="...
javascript实现商品购物车功能
09-27
纯javascript实现购物车，完成从商品页向购物车中添加商品，购物车中删除商品，更改商品数量，删除商品，全选单选等购物车操作，涉及到javascript中BOM,DOM,json,cookie等知识点的应用操作，综合性较强，对于javascript学习进阶有一定的帮助。
js代码实现购物车效果
weixin_34405557的博客
07-04 818
页面分上下两部分，上部分是所有的数据，下部分是购物车。通过在上面选择需要处理的数据添加进到购物车，实现对购物车数据的统一处理。 需要注意的有两点：①购物车数据可删除，且不能重复添加 ②响应时间考虑，购物车单次处理数据最多限制为200条 代码如下： /** *添加进购物车方法 */ function addToDownGrid(){ var selRows = $("#...
javascript实现购物车效果.zip
07-11
实现效果： ... javascript实现购物车效果,通过原生js代码实现购物车效果，一般电商网站或者商城网站会使用到购物车的效果，点击加减，总价随之变化，选中商品，点击删除，可以删除选中的商品！
基于JavaScript实现添加到购物车效果附源码下载
11-22
在本文中，我们将探讨如何使用JavaScript实现一个交互式的购物车功能。这个功能允许用户在页面上点击“添加到购物车”按钮，然后购物车会在页面的右下角以按钮的形式出现，用户可以展开购物车查看商品信息，进行删除...
php+mysql+js实现购物车效果
09-28
3. **JavaScript (JS)**：在前端，JavaScript负责实现用户界面的动态效果和交互。在这个项目中，当你点击“添加到购物车”按钮时，JS会通过AJAX异步请求与服务器通信，避免页面刷新，提升用户体验。同时，JS还可以...
JavaScript实现购物车基本功能
10-19
本篇文章将介绍如何使用JavaScript实现一个简单购物车的基本功能。这包括如何添加商品到购物车、全选或单个商品的选择、修改商品数量以及删除商品等功能。 首先，我们来看HTML结构部分。页面中有一个表格，表格的...
JS实现购物车特效
10-20
总的来说，实现购物车特效涉及到前端开发的多个方面，包括页面结构的构建、样式的设计以及功能逻辑的编写。通过对HTML、CSS和JavaScript的综合运用，可以创造出既美观又功能齐全的购物车体验，提高用户的购物体验。...
js 购物车代码
08-12
js购物车非常实用
JS实现购物车
01-05
JS实现购物车及计算删除
用js实现购物车
yichan_xiaoxiong的博客
06-10 881
js代码/** * Created by an.han on 13-12-17. */window.onload = function () {    if (!document.getElementsByClassName) {        document.getElementsByClassName = function (cls) {            var ret = [];  ...
JS实现购物车效果
qq_42739776的博客
08-27 847
1.效果 1.效果图： 2.功能描述 1.全选时，总价为商品价格和 2.反选时，总价为0 3.任意点击商品栏前的选中时，当所有商品前的选框选中时， 全选按钮变为选中，当商品前的任意一个选框未被选中时， 全选为未选中状态。 4.商品数量：点击+时，数量增加，单个商品总价随之变化 的同时，总价随之变化。点击-时，商品数量-1，单个商品 总价和所有商品合计减少对应价格，当数量为减为0时，移除 该产品。 5.删除：点击删除时，删除该商品，所有商品总计变化。 3.目的的意义： 熟悉javascript对dom元素
JS实现购物车动态功能
weixin_30933531的博客
05-25 5743
整理了一下当时学js写的一些案例，觉得购物车功能在一般网站比较常见且基础，现在把它整理出来，需要的小伙伴可以参考一下。 该案例购物车主要功能如下： 1、 商品单选、全选、反选功能 2、 商品添加、删除功能 3、 商品价格自动计算 具体效果： 打开效果 添加商品数量（自动计算价格）： 取消选择： 删除商品： 商品显示与隐藏： 做这个案例呢我用了之前自己封装的框架，所以需要的小伙伴，要到我的...
js实现购物车案例（全选，反选，加入，删除，加减，总价，数量）
m0_62309118的博客
09-26 5558
1.购物车效果展示 2.代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0px; padding:0px; }.shop{ width:900px; height:300px; border:1px solid red; margin:0 au
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

_码到成功_

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

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

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

打赏作者

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

抵扣说明：

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

余额充值