利用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 第二步.库的一些使用介绍 这个库使 ...
最新文章
- 【深入浅出-JVM】（序）
- Skin Demo优化之一
- uiswitch样式_Swift - 表格UITableView的plain、grouped两种样式详解（附分组头悬停）
- micropython mqtt 重连_ESP32/ESP8266使用MicroPython利用MQTT发布DHT11/DHT22传感器数据
- Excel LOOKUP 查找不准确的原因
- 手机web——自适应网页设计（html/css控制）
- 搭建分布式FastDFS集群
- 词袋模型 matlab,【火炉炼AI】机器学习051-视觉词袋模型+极端随机森林建立图像分类器...
- 华为云存储空间图库占比太大_管理云存储空间
- Mapbox相机动画整理（1）示例解析
- 获得32位UUID字符串和指定数目的UUID
- 【Codecs系列】GDR(Gradual Decoder Refresh)帧
- 免费截图工具PicPick 2.1.2绿色版
- Swoole实现基于WebSocket的群聊私聊
- $.ajax跨域请求数据的解决方案
- 9.半兰伯特光照模型
- 龙族幻想服务器维护多长时间,【龙族幻想】12月31日维护公告
- 图解图库Janusgraph系列-一文知晓图数据底层存储结构
- android 修改png颜色,安卓修改图片颜色
- keil5提示main.c: error C237: ‘wd‘: function already has a body