利用js实现购物车相关功能
2024-06-04 11:24:04
根据给出购物车页面，用js实现功能部分。
1、实现全选功能。
2、实现四个分项按钮跟随状态的变化并给每一个按钮添加事件，使每个状态发生变化时，判断当前有多少个选中状态的功能。
3、实现已选商品的件数以及合计多少钱的跟踪状态。
4、实现当点击数量中的“+”或“-”按钮时，可控制数量以及小计的变化。
5、实现删除功能。
注：代码中有相关注释，可参考
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>原生JS实现购物车结算功能代码</title>
<link rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" ></script>
</head>
<body>
<div class="catbox"><table id="cartTable"><thead><tr><th><label><input class="check-all check" type="checkbox"/> 全选</label></th><th>商品</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr></thead><tbody><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="data:images/1.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td><td class="price">5999.88</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">5999.88</td><td class="operation"><span class="delete">删除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="data:images/2.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td><td class="price">3888.50</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">3888.50</td><td class="operation"><span class="delete">删除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="data:images/3.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td><td class="price">1428.50</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">1428.50</td><td class="operation"><span class="delete">删除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="data:images/4.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td><td class="price">640.60</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">640.60</td><td class="operation"><span class="delete">删除</span></td></tr></tbody></table><div class="foot" id="foot"><label class="fl select-all"><input type="checkbox" class="check-all check"/> 全选</label><a class="fl delete" id="deleteAll" >删除</a><div class="fr closing" >结 算</div><input type="hidden" id="cartTotalPrice" /><div class="fr total">合计：￥<span id="priceTotal">0.00</span></div><div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div><div class="selected-view"><div id="selectedViewList" class="clearfix"><div><img src="data:images/1.jpg"><span>取消选择</span></div></div><span class="arrow">◆<span>◆</span></span> </div></div>
</div>
<script>// 第一步:实现全选功能//window.onload延时加载//等待结构加载完成，才加载jswindow.onload=function(){//js实现dom事件编程//1、事件源 发现页面中存在两个全选按钮//2、添加事件onchangevar prices=document.getElementsByClassName("price")var checkAlls=document.getElementsByClassName("check-all")var checkOnes=document.getElementsByClassName("check-one")var selectedTotal=document.getElementById("selectedTotal")var priceTotal=document.getElementById("priceTotal")var subtotals=document.getElementsByClassName("subtotal")var countInputs=document.getElementsByClassName("count-input")function totals(){var count=0var total=0for(var j=0;j<countInputs.length;j++){//.value获取到内容是字符型//数值+字符 自动将数值转化为字符 实现拼接if(checkOnes[j].checked){count=count+parseInt(countInputs[j].value)total=total+Number(subtotals[j].innerHTML)}}//当前selectedTotal内容设置countselectedTotal.innerHTML=count//js 小数精度问题//保留两位小数 .toFixed(2) priceTotal.innerHTML=total.toFixed(2)}for(var n=0;n<checkAlls.length;n++){checkAlls[n].onchange=function(){//当状态发生改变时，让其得四个分项按钮跟随状态变化//this==触发事件源得元素//复选框得选中状态 .checked//checkOnes 依次拿出数组中的内容，让其状态和this.checked保持一致for(var j=0;j<checkOnes.length;j++){checkOnes[j].checked=this.checked}//另外得到一个全选跟随变化，找到另外一个全选for(var j=0;j<checkAlls.length;j++){checkAlls[j].checked=this.checked}totals()}}//给每一个单项按钮添加事件，每一个状态发生变化时，单项按钮，判断当前有多少个选中状态//如果选择的个数=总个数，那么全选选中，反之取消for(var n=0;n<checkOnes.length;n++){checkOnes[n].onchange=function(){//统计当前单项按钮得选中个数var sum=0//依次判断每个单选按钮选中状态，选中sum++for(var j=0;j<checkOnes.length;j++){if(checkOnes[j].checked){sum++}}//sum=单选按钮个数for(var j=0;j<checkAlls.length;j++){checkAlls[j].checked= sum==checkOnes.length}totals()}}//点击+按钮时，可控制数量以及小计的变化var adds=document.getElementsByClassName("add")//依次将每个+号按钮，添加对应的点击事件for(var n=0;n<adds.length;n++){adds[n].index=n //依次给每个adds[n],添加adds[n].onclick=function(){//点击对应的按钮时，找到其对应的数量，随之发生变化var index=this.index //当前点击元素的索引值countInputs[index].value++//小计变化var count=countInputs[index].valuevar price=prices[index].innerHTMLsubtotals[index].innerHTML=(count*price).toFixed(2)totals()}}var reduces=document.getElementsByClassName("reduce")for(var n=0;n<reduces.length;n++){reduces[n].index=nreduces[n].onclick=function(){var index=this.index if(countInputs[index].value==0){return}countInputs[index].value--var count=countInputs[index].valuevar price=prices[index].innerHTMLsubtotals[index].innerHTML=(count*price).toFixed(2)totals()}}var deletes=document.getElementsByClassName("delete")for(var n=0;n<deletes.length;n++){deletes[n].onclick=function(){//通过元素的层级操作//通过层级关系，发现要删除的元素var tr=this.parentNode.parentNode//如何在js中移除对应元素//1、先找到要被移除的父级//2、父级.removeChild（移除的元素）var table=tr.parentNode //找到被移除元素的父级table.removeChild(tr)totals()//需要计算当前选中个数，和所有复选框的个数，判断全选是否选中for(var n=0;n<checkOnes.length;n++){checkOnes[n].onclick=function(){var sum=0for(var j=0;j<checkOnes.length;j++){if(checkOnes[j].checked){sum++}}for(var j=0;j<checkAlls.length;j++){checkAlls[j].checked= sum==checkOnes.lengthtotals()}}}for(var j=0;j<adds.length;j++){reduces[j].index=jadds[j].index=j}}}}
</script>
</body>
</html>利用js实现购物车相关功能相关推荐
- java循环购物车结算系统_原生JS实现购物车结算功能代码
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD ...
- 怎样编写html购物车结算页面,原生JS实现购物车结算功能
原生JS实现购物车结算功能 @charset "utf-8"; *{margin:0;padding:0;list-style-type:none;} a{color:#666;t ...
- Case Study: 利用JS设计高级检索功能通过PHP获取MySQL数据
一.目标 该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个含有高级检索功能的数据库网页.该功能效果如图1所示.用户在文本框中输入相应内容 ...
- 利用js加密保护核心功能代码
前言 像很多大站,都有类似于站外链接跳转提示这类功能,这类功能应用范围广,如果被不法分子找到代码中可能被利用的漏洞,很容易利用xss攻击等行为达到非法的目的,导致众多用户信息可能遭受风险,自身产品也蒙 ...
- 利用js实现简单抽奖功能
其实这种抽奖的功能和选人是一样的.在点击开始按钮之后,标题上方的名字可以实现一个不停的变化,在点击停止之后抽出获奖的名字.在写之我们必须明确一点的是需要用到哪些方法:并且将基础的框架搭建出来: 下面是 ...
- 利用springMVC实现购物车结算功能
2019独角兽企业重金招聘Python工程师标准>>> 在cart-1.html中 <form action="alipayConfirm" th:obje ...
- 利用JS实现复制/粘贴功能
1.最基本的复制 Java代码 <script language="javascript"> function readTxt() { alert(window.cli ...
- html段落自动删除,利用JS代码自动删除稿件的普通弹幕功能
事情的起因是在b站投稿了一个高级弹幕测试的视频(av9940487),但是由于b站的弹幕池机制是新的弹幕顶掉旧的弹幕,所以导致一些人发的高级弹幕很快就被顶掉了. 所以就想着写个脚本来自动删除属性为普通 ...
- node.js发送html,利用Node.JS实现邮件发送功能
第一步.配置篇 首先需要安装nodemailer库 npm install nodemailer//默认会安装最新的版本. 关于这个库的文档参见nodemailer 第二步.库的一些使用介绍 这个库使 ...
最新文章
- 【TPAMI2022】关联关系驱动的多模态分类
- 【思维导图-索引篇】搞定数据库索引就是这么简单
- python学习笔记3—流程控制if、for、while
- SolrQuery的使用
- 模糊神经网络工具箱函数使用
- 【风险管理】风控一二三
- sqlalchemy 基操,勿6
- 太阳能板清洗机器人科沃斯_太阳能电池板清洁机器人
- devops定义_在层中定义DevOps
- element布局容器大小_Flutter完整开发实战详解(十六、详解自定义布局实战)
- 数据结构 5-2 二叉树建树
- 网站博客搬家工具大全
- Windows2000 VMware Tools KB835732 补丁包
- 微信小程序开发——单行文本溢出显示省略号
- 特斯拉又遇致命车祸：车主严重烧伤无法辨认 事故一天后电池复燃
- react中dispatch_react-redux中连续两次dispatch-actions有顺序吗？
- python中新建标签页的三种方法
- 【codeforces 417D】Cunning Gena
- linux常用运维shell,常用的shell命令,持续更新 | linux运维小站–linux系统架构_服务器运维_Linux运维工程师工作手札...
- 复利java_复利计算1.0,2.0,3.0（java）