2021-04-10

最新推荐文章于 2024-09-30 15:23:15 发布
最新推荐文章于 2024-09-30 15:23:15 发布
阅读量83 收藏
点赞数
分类专栏： javascript案例 文章标签： javascript css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51747477/article/details/115585437
版权

一、 实现购物车模块js案例

在这里插入图片描述

1、购物车模块HTML布局

<body>
    <div class="wrap w">
        <div class="location">当前位置， 首页<span class="ch c1">&gt;</span><b class="f10">购物车</b></div>
        <table width=100% border="0" cellspacing="0" cellpadding="0" class="carttable">
            <tr class="title">
                <td width="50px"><input type="checkbox" class="chooes" value=""></td>
                <td width="100" class="tal"><span style="margin-left: -15px;">全选</span></td>
                <td width="400" class="tal">商品信息</td>
                <td width="150">单价（元）</td>
                <td width="150" style="text-align: center;">数量&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td width="150">金额</td>
                <td width="80">操作</td>
            </tr>
            <tr class="cont">
                <td><input type="checkbox" class="chooes" value=""></td>
                <td class="tal">
                    <a href="#" class="pic"><img src="C:\code.html\JS-Web-APIs\imeages\upload-icon.png" alt=""></a>
                </td>
                <td class="tal he">
                    <a href="#">凌美lamy Safar钢笔/半铅笔T52品黑色水</a>
                </td>
                <td><del>199.00</del><br>
                    <b class="unit" style="font-weight: 400;">159.00</b>
                </td>
                <td>
                    <div class="amout">
                        <a href="#" class="increase">+</a>
                        <input type="text" value="1" class="unum">
                        <a href="#" class="reduce">-</a>
                    </div>
                </td>
                <td><b class="price" style="font-weight: 400;">199.00</b></td>
                <td>
                    <a href="#" class="btn">x</a>
                </td>
            </tr>

            <tr class="cont">
                <td><input type="checkbox" class="chooes" value=""></td>
                <td class="tal">
                    <a href="#" class="pic"><img src="C:\code.html\JS-Web-APIs\imeages\upload-3.png" alt=""></a>
                </td>
                <td class="tal he">
                    <a href="#">凌美lamy Safar钢笔/半铅笔T52品黑色水</a>
                </td>
                <td><del>158.00</del><br>
                    <b class="unit" style="font-weight: 400;">129.00</b>
                </td>
                <td>
                    <div class="amout">
                        <a href="#" class="increase">+</a>
                        <input type="text" value="1" class="unum">
                        <a href="#" class="reduce">-</a>
                    </div>
                </td>
                <td><b class="price" style="font-weight: 400;">129.00</b></td>
                <td>
                    <a href="#" class="btn">x</a>
                </td>
            </tr>
            <tr class="cont">
                <td><input type="checkbox" class="chooes" value=""></td>
                <td class="tal">
                    <a href="#" class="pic">x</a>
                </td>
                <td class="tal he">
                    <a href="#">凌美lamy Safar钢笔/半铅笔T52品黑色水</a>
                </td>
                <td><del>158.00</del><br>
                    <b class="unit" style="font-weight: 400;">129.00</b>
                </td>
                <td>
                    <div class="amout">
                        <a href="#" class="increase">+</a>
                        <input type="text" value="1" class="unum">
                        <a href="#" class="reduce">-</a>
                    </div>
                </td>
                <td><b class="price" style="font-weight: 400;">199.00</b></td>
                <td>
                    <a href="#" class="btn">x</a>
                </td>
            </tr>
            <tr class="cont">
                <td><input type="checkbox" class="chooes" value=""></td>
                <td class="tal">
                    <a href="#" class="pic"><img src="C:\code.html\JS-Web-APIs\imeages\upload-3.png" alt=""></a>
                </td>
                <td class="tal he">
                    <a href="#">凌美lamy Safar钢笔/半铅笔T52品黑色水</a>
                </td>
                <td><del>158.00</del><br>
                    <b class="unit" style="font-weight: 400;">129.00</b>
                </td>
                <td>
                    <div class="amout">
                        <a href="#" class="increase">+</a>
                        <input type="text" value="1" class="unum">
                        <a href="#" class="reduce">-</a>
                    </div>
                </td>
                <td><b class="price" style="font-weight: 400;">199.00</b></td>
                <td>
                    <a href="#" class="btn">x</a>
                </td>
            </tr>
        </table>
        <div class="count-price">
            <div class="box-lt"><input type="checkbox"> <span>全选</span> <span>删除选中商品</span></div>
            <div class="box-rt">
                <span class="amort">商品总计：￥<b>608.00</b></span><br>
                <span class="youhui">活动优惠：-￥<b>0.00</b></span><br>
                <span class="wupi">已选商品0件 总价（不含运费、税费）：<b>￥0.00</b></span><br>
                <a href="#">结算</a>
            </div>
        </div>
    </div>
</body>

2、CSS样式布局

   <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .w {
            width: 1080px;
            margin: 0 auto;
        }
        
        a {
            color: #666;
            text-decoration: none;
        }
        
        .wrap {
            border: 1px solid #ccc;
        }
        
        .wrap .location {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
        }
        
        .wrap .location .f10 {
            color: #ff6700;
            padding-left: 10px;
        }
        
        .wrap .title {
            height: 40px;
            background-color: #ccc;
        }
        
        .wrap tr .chooes {
            margin-left: 15px;
        }
        
        .wrap .cont {
            height: 80px;
            font-size: 12px;
        }
        
        .wrap .cont .amout {
            width: 120px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #333;
        }
        
        .wrap .cont .amout .increase {
            float: left;
            width: 30px;
            height: 30px;
        }
        
        .wrap .cont .amout.reduce {
            float: left;
            width: 30px;
            height: 30px;
        }
        
        .wrap .cont .amout .unum {
            float: left;
            width: 60px;
            height: 30px;
            border: 0;
            outline: none;
            text-align: center;
            border-left: 1px solid #333;
            border-right: 1px solid #333;
        }
        
        .count-price {
            height: 150px;
            font-size: 12px;
            border-top: 1px solid #ccc;
        }
        
        .count-price .box-lt {
            float: left;
            margin: 15px 0 0 15px;
        }
        
        .count-price .box-rt {
            float: right;
            margin: 15px 15px 0 0;
        }
        
        .count-price .box-rt span {
            float: right;
        }
        
        .count-price .box-rt a {
            float: right;
            width: 140px;
            height: 40px;
            line-height: 40px;
            margin-top: 10px;
            text-align: center;
            font-size: 16px;
            color: #fff;
            background-color: #ff6700;
        }
        
        .count-price .box-rt b {
            font-weight: normal;
        }
        
        .count-price .box-rt.youhui {
            margin: 10px 0;
        }
        
        .count-price .box-rt .wupi b {
            font-size: 20px;
            color: #ff6700;
        }
    </style>

3、JS逻辑布局功能分析及代码实现

3.1、购物车逻辑功能分析

**1、全选功能： 每个商品都会被选中；每行的小计价格会汇总放入总计里面

2、单选功能或取消选中： 被选中行被选中；将购物车内被选中的行的小计价格会汇总放入总计 判断是否被全选中，（全选按钮默认也是选中）

//选中，后者取消选中点击事件
for (var i = 0; i < chooes.length; i++) {
    chooes[i].addEventListener('click', function() {
        gettotal();
    })
}

3、数量的加减功能： 数量的加或减；这行就会被选中 数量加或者减少（最少1） 计算单行的小计价格 将所有被选中的商品，汇总放入总计

var ai = document.querySelectorAll(’.increase’);
var ar = document.querySelectorAll(’.reduce’);
var unmu = document.querySelectorAll(’.unum’);
var zj = document.querySelector(’.zj’);
//数量增加
for (var i = 0; i < ai.length; i++) {
ai[i].addEventListener(‘click’, function() {
numchange(this, ‘ai’);
})
}
//数量减少
for (var i = 0; i < ar.length; i++) {
ar[i].addEventListener(‘click’, function() {
numchange(this, ‘ar’);
})
}
//输入框
for (var i = 0; i < unmu.length; i++) {
unmu[i].addEventListener(‘blur’, function() {
if (this.value < 1) { //数量不能少于1
this.value = 1;
}
this.value = parseInt(this.value); //取整
numchange(this, ‘cur’)

    })
}
//函数的封装
//1、数量增加或者减少
//2、对this当前的dom节点操作
function numchange(dom, act) {
    var amout = dom.parentNode
    var unm = amout.querySelector('.unum');
    var num = unm.value;
    if (act == "ai") {
        num++;
        unm.value = num;
    } else if (act == "ar") {
        if (num < 1) {
            num = 1;
        } else {
            num--;
        }
        unm.value = num;
    } else if (act = "cur") {

    } else {
        return;
    }
    var tr = amout.parentNode.parentNode;
    var price = tr.querySelector('.price');
    var unit = tr.querySelector('.unit');
    var danjia = unit.innerHTML;
    var sumprice = num * danjia;
    sumprice = sumprice.toFixed(2); //保留2位小数
    price.innerHTML = sumprice;

    var chos = tr.querySelector('.chooes');
    chos.checked = true;

}

4、删除按钮 这行会被删除 重新计算总价放入总计

5、删除被选中的商品 购物车总计价格为0**

6、封装总计价格函数

//封装函数计算总合计价格
function gettotal() {
//找到每一行遍历每一行在找到单选框
var total = 0;
for (var i = 0; i < cont.length; i++) {
var chooes = cont[i].querySelector(’.chooes’);
console.log(chooes);
if (chooes.checked) {
var prices = cont[i].querySelector(’.price’).innerHTML;
console.log(prices);
prices = Number(prices);
total = total + prices;
}

    }
    var total = total.toFixed(2);
    var zj = document.querySelector('.zj').innerHTML = '￥' + total;

//判断所有行是否都被选中
for (var i = 0; i < cont.length; i++) {
if (!chooes.checked) {
choo.checked = false;
} else {
choo.checked = true;
}
}

}
gettotal();
真棒子晓
关注
专栏目录
2021-11-04
HHH_____的博客
11-04 2381
kettle发送邮件失败 《数据清洗》黑马程序员编著第三章实操。 报错如下 发送邮件 - ERROR (version 9.0.0.0-423, build 9.0.0.0-423 from 2020-01-31 04.53.04 by buildguy) : Problem while sending message: javax.mail.MessagingException: Could not connect to SMTP host: smtp.qq.com, port: 465, respons
文件存储minio-RELEASE.2021-04-22T15-44-28Z历史老旧版本windows-linux下载
12-06
minio-RELEASE.2021-04-22T15-44-28Z，这是MinIO最后一个 Apache V2.0的版本，minio此后的版本都改为AGPLV3协议了，没法进行商业用途了。这个包包含minio-RELEASE.2021-04-22T15-44-28Z的windows二进制包，linux二...
2021-04-21
qq_56102648的博客
04-21 841
2021-01-04
wubaoyu123的博客
01-04 2267
博客园Logo 首页 新闻 博问 专区 闪存 班级 代码改变世界 搜索 注册 登录 返回主页 知了一笑 博客园 首页 新随笔 联系 订阅 管理 数据仓库组件：Hive环境搭建和基础用法 本文源码：GitHub || GitEE 一、Hive基础简介 1、基础描述 Hive是基于Hadoop的一个数据仓库工具，用来进行数据提取、转化、加载，是一个可以对Hadoop中的大规模存储的数据进行查询和分析存储的组件，Hive数据仓库工具能将结构化的数据文件映射为一张数据库表，并提供SQL查询功能，能将SQL语句转变成
2021-04-26
sandrew0916的博客
04-26 730
导语 explicit防止隐式转换 拷贝构造 拷贝赋值
CVE-2021-22205——Gitlab 远程命令执行漏洞复现
LiBai'S BLOG
11-10 9210
CVE-2021-22205Vuln Impact影响版本环境Fofa语法漏洞利用脚本反弹ShellEXP Vuln Impact An issue has been discovered in GitLab CE/EE affecting all versions starting from 11.9. GitLab was not properly validating image files that were passed to a file parser which resulted in a .
2021-01-10
qq_22667507的博客
01-10 1019
jupyter notebook中直接安装python的第三方库。 例如安装pymysql ： ! pip install pymysql。 升级pip：
2021-04-04
热门推荐
wx601056818的博客
04-04 1万+
修复：Windows 10官方工具提示错误0xC1800103 – 0X90002 清理SoftwareDistribution文件夹 通常，“软件分发”文件夹中的一些垃圾文件会导致错误0xC1800103 – 0X90002。删除它们是避免Windows 10中不必要的错误消息的好习惯。 步骤1：右键单击“开始”按钮，然后从可见列表中选择“运行”。 步骤2：在“运行”对话框的文本框中键入以下命令，然后按Enter – %SystemRoot%\SoftwareDistribution\Downl
2021-10-04
boy_only的博客
10-04 4562
Ubuntu安装Datax 安装Java jdk: 打开终端，输入以下三行代码： 1、sudo add-apt-repository ppa:linuxuprising/java 2、sudo apt update 3、sudo apt install oracle-java17-installer （17可以改成16） 安装完成后，输入：java -version查看是否安装成功。 安装python2.X: 在终端输入： sudo apt-get install python2-minimal pytho
minio（RELEASE.2021-04） 和s3cmd（2.1.0_2 ）部署
blackoon88的博客
04-21 2097
文章目录前言一、minio安装1.文件下载2.安装文件3.启动停止服务二、s3cmd安装1.下载安装包2.安装配置3.使用3.1 minio web端3.2s3cmd上传下载文件总结 前言 分布式文件存储，支持java API，选用minio，当然也可以使用阿里的OSS，azure S3等其他技术； 本地文件上传，下载文件可以使用s3cmd,所以本地安装下s3cmd. 提示：以下是本篇文章正文内容，下面案例可供参考 一、minio安装 对于中小型企业，如果不选择存储上云，那么 Minio 是个不错的选
Gitlab RCE CVE-2021-22205
不光要学，知识要能说出口
11-04 3845
Gitlab RCE CVE-2021-22205声明代码 声明 本程序仅供于学习交流，请使用者遵守《中华人民共和国网络安全法》，勿将此脚本用于非授权的测试，脚本开发者不负任何连带法律责任。 代码 { "Name": "Gitlab RCE CVE-2021-22205", "Level": "3", "Tags": [ "rce" ], "GobyQuery": "app=gitlab | title=\"gitlab\"
NMONVisualizer_2021-04-04.jar
08-31
NMONVisualizer is a Java GUI tool for analyzing nmon system files from both AIX and Linux. It also parses IOStat files, IBM verbose GC logs, Windows Perfmon & ESXTop ... the latest version (2021-04-04).
scanport-2021-04-10.zip
04-10
《端口扫描技术详解——基于"scanport-2021-04-10.zip"工具》 在信息技术领域，网络安全是至关重要的一个环节，而端口扫描则是网络安全检测中的基础工具。本文将深入探讨端口扫描的概念、类型、工作原理以及其在...
CBM219X UMPToolV7200(2021-04-26).zip
07-06
CBM219X UMPToolV7200(2021-04-26) 是一个专门针对CBM219X设备的更新工具，它提供了对设备的管理和维护功能，帮助用户进行固件升级、系统优化以及故障排查。这个工具的版本号为V7200，表明它是2021年4月26日发布的，...
网站爬虫扫描2021-04-10.zip
04-10
这个"网站爬虫扫描2021-04-10.zip"文件可能包含了2021年4月10日执行的一项网站安全扫描的结果。爬虫在IT行业中扮演着重要角色，主要用于数据挖掘、搜索引擎索引更新以及网站性能分析等多个领域。 首先，我们来了解...
如何搭建Vue脚手架
w6437286的博客
09-26 472
本文主要讲解如何搭建vue脚手架。
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 686
Vue 2 中使用 Vue I18n 插件实现中英文切换
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 439
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Web认识 -- 第一课
最新发布
ZxVSaccount的博客
09-30 812
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
minio 2021-04
09-17
minio是一个开源的分布式对象存储服务器，它于2021年04月进行了一些重要的更新和改进。这些更新主要是为了提高系统性能、增加功能和改进用户体验。 首先，minio在2021年04月更新中加入了新的高级功能，例如多部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值