js实现简单购物车的价格，件数效果

最新推荐文章于 2023-10-07 16:57:22 发布
最新推荐文章于 2023-10-07 16:57:22 发布
阅读量296 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hangnan315/article/details/117447186
版权

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>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        th,
        td {
            text-align: center;
        }

        span {
            margin: 0 8px;
        }
    </style>
</head>

<body>
    <div class="box">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>产品名称</th>
                    <th>产品单价</th>
                    <th>产品数量</th>
                    <th>总价</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>iphone5</td>
                    <td>500</td>
                    <td><button>-</button><span>1</span><button>+</button></td>
                    <td class="price">500</td>
                </tr>
                <tr>
                    <td>iphone6</td>
                    <td>600</td>
                    <td><button>-</button><span>1</span><button>+</button></td>
                    <td class="price">600</td>
                </tr>
                <tr>
                    <td>iphone7</td>
                    <td>700</td>
                    <td><button>-</button><span>1</span><button>+</button></td>
                    <td class="price">700</td>
                </tr>
            </tbody>
            <thead>
                <tr>
                    <td colspan="3">total</td>
                    <td id="all">500</td>
                </tr>
            </thead>
        </table>
    </div>
    <script>
        // 获取所有按钮
        // 获取所有总价
        // 获取合计
        var all = document.getElementById("all");
        var btns = document.getElementsByTagName("button");
        var price = document.getElementsByClassName("price");
        for (var i = 0; i < btns.length; i++) {
            // 给按钮添加点击事件
            btns[i].onclick = function () {
                var danjia = Number(this.parentNode.previousElementSibling.innerHTML);
                // 数量加减，总价变化，合计变化
                if (this.innerHTML == "+") {
                    var span = this.previousElementSibling;
                    span.innerHTML = Number(span.innerHTML) + 1;
                } else {
                    var span = this.nextElementSibling;
                    if (span.innerHTML == "1") {
                        alert("不能再减少喽");
                        return;
                    }
                    span.innerHTML = Number(span.innerHTML) - 1;

                }
                this.parentNode.nextElementSibling.innerHTML = Number(span.innerHTML) * danjia;
                // 计算总价
                var about = this.parentNode.nextElementSibling;
                about.innerHTML = Number(span.innerHTML) * danjia;
                var sum = 0;
                for (var i = 0; i < price.length; i++) {
                    sum += Number(price[i].innerHTML);
                }
                all.innerHTML = sum;
            }
        }
    </script>
</body>

</html>
nan囡315
关注
JavaScript购物车的价格计算
qq_56734546的博客
12-25 1063
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/common.css" /> <style type="text/css"> #Upload{ ...
利用JavaScript实现简单的购物车功能
weixin_45457515的博客
08-19 790
如图所示 当点击加减号时总价，总件数与总价格也要改变 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...
Vue.js实现购物车功能简单拓展（商品数量的变化、总价的变化）
m0_56426418的博客
03-23 1413
实现购物车功能简单拓展（商品数量的变化、总价的变化）
html购物车输入数量标签,js实现购物车数量增减联动价格变化
weixin_34351588的博客
06-05 2061
如题。使用js实现一个购物车中常见的功能：购物数量增减功能。我实现的效果如图： 两边是两个input，中间是一个input输入框。HTML：JS：//根据选择的数量计算总价，并显示出来function setTotal(){var t = $("#num");var tmp = document.getElementById("totalPrice");//需要修改的总价位置1var tmp1 =...
js购物车数量价格变化
暖心少年
05-29 2069
链接：https://pan.baidu.com/s/14bb2RSZqqupzKN-vizzZcA 密码：gdv3
利用js实现购物车相关功能
weixin_63489869的博客
06-22 4778
利用js实现购物车相关功能
代码实现vue购物车图标显示购物车内件数
06-09
可以通过以下步骤实现Vue购物车图标显示购物车内件数： 1. 在Vue组件中定义一个data属性，用于存储购物车内件数的值。 ```javascript data() { return { cartCount: 0 } } ``` 2. 监听购物车中商品数量的变化...
jQuery实现购物车数字加减效果
12-10
我们在网上购物提交订单时，在网页上一般会有一个选择数量的控件，要求买家选择购买商品的件数，开发者会把该控件做成可以通过点击实现加减等微调操作，当然也可以直接输入数字件数。本文将介绍常见的几种使用...
用原生JavaScript和jQuery实现购物车页面基本功能
qq_52264068的博客
11-27 735
用原生JavaScript和jQuery实现购物车页面基本功能
jQuery实现购物车计算价格功能的方法
01-21
本文实例讲述了jQuery实现购物车计算价格功能的方法。分享给大家供大家参考。具体如下： 目的 实现在html界面修改购物车的件数，购物车商品价格的小计和总计要修改。 实现思路 1.当点击进入界面，刷新的时候触发body...
数据列表+商城购物车纯JS实现
01-04
1.用列表展现数据 2.可增删改查 3.纯JS、JQuery实现 4.购物车技术同理
js前端实现购物车功能（数量增加，总价增减）
最新发布
m0_63448468的博客
10-07 906
【代码】js前端实现购物车功能（数量增加，总价增减）
JS购物车
qq_43661841的博客
10-23 999
极其丑陋，极其丑陋的一个简单购物车 <!DOCTYPE html> <html> <head> <title> </title> <style type="text/css"> #select1,#select2{ width: 350px; height: 350px; } .list,....
JavaScript，水果购物车，JavaScript实现html页面增加，删除，修改单价
zzysdfsdfa的博客
04-14 2107
尚硅谷的2022javaweb教程，Html+css+JavaScript做一个水果小票购物车，完成添加，删除，修改单价操作。
JavaScript网页购物车
weixin_67235801的博客
03-12 3794
网页购物车功能的实现
JavaScript（购物Demo）
小东升职记
12-14 1265
JavaScript是嵌入HTML中在浏览器中的脚本语言，具有与java和C语言类似的语法 一种网页编程技术，用来向HTML页面添加交互式行为 直接嵌入HTML页面 由浏览器解释执行代码，不进行预编译 数据类型转换函数 toString：所有数据类型均可转换为String类型； parseInt：强制转换成整数，如果不能转换，则返回NaN（not a number）； parseFlo...
html+css+js实现购物车，多选，反选，删除，计算总价。单击按钮增加和减少
m0_70932336的博客
04-03 4143
【代码】html+css+js实现购物车，多选，反选，删除，计算总价。单击按钮增加和减少。
javaScript原生版购物车：全选、单选、全删、商品数量增减、计算总价、添加商品（代码）
小福气的博客
07-06 8483
题目： CSS代码如下： <style> *{ margin:0px; padding:0px; } .header,.content,.floot{ width:800px; margin:0pxauto; } .headerulli,.contentulli{ ...
javascript实现简单的购物车
qq_44242030的博客
03-10 491
    <!DOCTYPE html> <html lang="en"> <head>     &lt...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值