用html,css和js写购物车移动端加减全反选及计算总价

目录

html代码

css代码

js代码

完整代码

效果图


html代码

 <script src="./flexible.js"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> --><div class="header"><div class="header-left"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiangzuojiantou"></use></svg></div><div class="header-middle">购物车(6)</div><div class="header-right"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-duanxinxiaoxixinxi"></use></svg></div></div><div class="main"><div class="main-top"><div class="radio2"><div class="box1"><input type="checkbox" id="checkAll"><img class="kin" src="./img/icon/icon-kin.png" alt=""><span class="ac">艾畅旗舰店</span></div><div class="box2"> <span>领劵</span> <span>编辑</span></div></div></div><ul><!-- <li><div class="radio"><input type="radio"></div><div class="img"><img src="./img/pd/sf-16.jpg"alt=""></div><div class="right"><h3>【黑卡96折】Apple苹果iPhone 7(A1660)移动联通电信4C手机国内...</h3><span class="color">重量:3.3kg颜色:标配版</span><div class="flex"><div id="red">¥100.00</div><div class="input"><button class="decrease">-</button><span class="input-inner">1</span><button class="increase">+</button></div></div></div></li> --></ul><div class="all">本店总计:¥<span class="digit">0.00</span></div></div><div class="footer"><div class="radio1"><input type="radio"></div><div class="footer-middle"><span class="select">全选</span><span class="total">合计: <span class="digitall">0.00</span> </span></div><div class="go"><span>去结算</span></div></div>

css代码

     * {padding: 0;margin: 0;list-style: none;}body {background-color: #f0f2f5;}html,body {padding: 0;margin: 0;width: 100%;height: 100%;position: absolute;left: 0;top: 0;overflow: hidden;overflow-y: auto;}.header {width: 10rem;height: 1.2rem;background-color: white;position: fixed;top: 0;left: 0;display: flex;justify-content: space-between;align-items: center;}.header-left {margin-left: .2667rem;}.header-right {margin-right: .2667rem;}.img img {width: 2.1333rem;height: 2.1333rem;margin-left: 1.0667rem;}/* .input{border: 1px solid red;} */.input .input-inner {display: inline-block;background-color: white;width: .8533rem;/* height: .5867rem; */height: .64rem;border-left: 1px solid #e5e5e5;border-right: 1px solid #e5e5e5;text-align: center;/* font-size: .32rem; */}.increase,.decrease {width: .6133rem;height: .5867rem;outline: none;font-size: .3733rem;border: none;background-color: white;}.right {margin-right: .2667rem;}.right h3 {font-size: .32rem;}.right .color {font-size: .32rem;color: #666;}.main {margin-top: 1.4667rem/* width: 10rem;height: 2.4533rem; */}.main ul li {width: 10rem;height: 2.4533rem;display: flex;background-color: white;}#red {font-size: .4267rem;color: red;}.input {display: inline-flex;width: 2rem;height: .64rem;border: 1px solid #e5e5e5;}.flex {display: flex;justify-content: space-between;}.main ul {/* margin-bottom: 2.6667rem; */margin-bottom: .2667rem;}.main ul li {margin-top: .2667rem;/* border: 1px solid blue; */}.radio input {width: .48rem;height: .9333rem;margin-top: .5333rem;margin-left: .2667rem;}.footer {width: 10rem;height: 1.3333rem;background-color: white;position: fixed;left: 0;bottom: 0;display: flex;justify-content: space-between;align-items: center;}.footer .radio1 input {width: .48rem;height: .9333rem;margin-top: .2667rem;margin-left: .2667rem;}.select {font-size: .32rem;}.footer .go {width: 3.6rem;height: 1.3067rem;background-color: red;color: white;/* float: right; */text-align: center;/* font-size: .3733rem; */display: inline-flex;justify-content: center;align-items: center;}.total {margin-left: .4rem;color: red;}.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}.all {width: 10rem;/* height: 2.6667rem; */height: .9333rem;background-color: white;margin-bottom: 1.6rem;font-size: .32rem;line-height: .9333rem;text-align: right;}.digit {/* margin-left: .4rem; */margin-right: .4rem;color: red;}.kin {width: .5333rem;height: .5333rem;vertical-align: middle;}.main-top {width: 10rem;height: 1.0667rem;background-color: white;}.radio2 input {width: .48rem;height: .9333rem;margin-left: .2667rem;margin-right: .5333rem;}.radio2 .ac {font-size: .32rem;}.radio2 {display: flex;justify-content: space-between;align-items: center;}.box2 span {font-size: .32rem;margin-right: .2667rem;}.box1 {display: inline-flex;align-items: center;}

js代码

  const list = [{id: 1,url: "./img/pd/sf-16.jpg",count: 1,isChecked: false,price: 100},{id: 2,url: "./img/pd/sf-15.jpg",count: 3,isChecked: true,price: 100.00},{id: 3,url: "./img/pd/sf-14.jpg",count: 3,isChecked: false,price: 100.00},{id: 4,url: "./img/pd/sf-8.jpg",count: 3,isChecked: false,price: 100.00},{id: 5,url: "./img/pd/sf-9.jpg",count: 3,isChecked: false,price: 100.00},{id: 6,url: "./img/pd/sf-10.jpg",count: 3,isChecked: false,price: 100.00},{id: 7,url: "./img/pd/sf-11.jpg",count: 3,isChecked: false,price: 100.00},{id: 8,url: "./img/pd/sf-12.jpg",count: 3,isChecked: true,price: 100.00}]const checkAll = document.querySelector('#checkAll')function render() {let str = ''for (let i = 0; i < list.length; i++) {str += `<li data-id="${i}"><div class="radio"><input id="cks" type="checkbox"${list[i].isChecked ? 'checked' : ''} ></div><div class="img"><img src="${list[i].url}"alt=""></div><div class="right"><h3>【黑卡96折】Apple苹果iPhone 7(A1660)移动联通电信4C手机国内...</h3><span class="color">重量:3.3kg颜色:标配版</span><div class="flex"><div id="red">¥${list[i].price}</div><div class="input"><button class="decrease">-</button><span class="input-inner">${list[i].count}</span><button class="increase">+</button></div></div></div></li>`}checkAll.checked = list.every(ele => ele.isChecked === true)//被勾选组成的数组const newArr = list.filter(item => item.isChecked)//计算总价const totalPrice = newArr.reduce((prev, item) =>prev += item.count * item.price, 0)document.querySelector('.all .digit').innerHTML = totalPrice.toFixed(2)document.querySelector('.total .digitall').innerHTML = totalPrice.toFixed(2)document.querySelector('ul').innerHTML = str}render()const ul = document.querySelector('.main ul')ul.addEventListener('click', function (e) {//加if (e.target.className === 'increase') {const idx = e.target.parentNode.parentNode.parentNode.parentNode.dataset.idlist[idx].count++render()}//减if (e.target.className === 'decrease') {const idx = e.target.parentNode.parentNode.parentNode.parentNode.dataset.idlist[idx].count--if (list[idx].count <= 1) {list[idx].count = 1}render()}//多选一if (e.target.tagName === 'INPUT') {const idx = e.target.parentNode.parentNode.dataset.idlist[idx].isChecked = e.target.checkedrender()}})//单个商店的全选const cks = document.querySelectorAll('#cks')checkAll.addEventListener('click', function () {list.forEach(item => item.isChecked = this.checked)render()})

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./download (2)/font_4370149_lbec5agznkr/iconfont.js"></script><link rel="stylesheet" href="./flexible.js"><style>* {padding: 0;margin: 0;list-style: none;}body {background-color: #f0f2f5;}html,body {padding: 0;margin: 0;width: 100%;height: 100%;position: absolute;left: 0;top: 0;overflow: hidden;overflow-y: auto;}.header {width: 10rem;height: 1.2rem;background-color: white;position: fixed;top: 0;left: 0;display: flex;justify-content: space-between;align-items: center;}.header-left {margin-left: .2667rem;}.header-right {margin-right: .2667rem;}.img img {width: 2.1333rem;height: 2.1333rem;margin-left: 1.0667rem;}/* .input{border: 1px solid red;} */.input .input-inner {display: inline-block;background-color: white;width: .8533rem;/* height: .5867rem; */height: .64rem;border-left: 1px solid #e5e5e5;border-right: 1px solid #e5e5e5;text-align: center;/* font-size: .32rem; */}.increase,.decrease {width: .6133rem;height: .5867rem;outline: none;font-size: .3733rem;border: none;background-color: white;}.right {margin-right: .2667rem;}.right h3 {font-size: .32rem;}.right .color {font-size: .32rem;color: #666;}.main {margin-top: 1.4667rem/* width: 10rem;height: 2.4533rem; */}.main ul li {width: 10rem;height: 2.4533rem;display: flex;background-color: white;}#red {font-size: .4267rem;color: red;}.input {display: inline-flex;width: 2rem;height: .64rem;border: 1px solid #e5e5e5;}.flex {display: flex;justify-content: space-between;}.main ul {/* margin-bottom: 2.6667rem; */margin-bottom: .2667rem;}.main ul li {margin-top: .2667rem;/* border: 1px solid blue; */}.radio input {width: .48rem;height: .9333rem;margin-top: .5333rem;margin-left: .2667rem;}.footer {width: 10rem;height: 1.3333rem;background-color: white;position: fixed;left: 0;bottom: 0;display: flex;justify-content: space-between;align-items: center;}.footer .radio1 input {width: .48rem;height: .9333rem;margin-top: .2667rem;margin-left: .2667rem;}.select {font-size: .32rem;}.footer .go {width: 3.6rem;height: 1.3067rem;background-color: red;color: white;/* float: right; */text-align: center;/* font-size: .3733rem; */display: inline-flex;justify-content: center;align-items: center;}.total {margin-left: .4rem;color: red;}.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}.all {width: 10rem;/* height: 2.6667rem; */height: .9333rem;background-color: white;margin-bottom: 1.6rem;font-size: .32rem;line-height: .9333rem;text-align: right;}.digit {/* margin-left: .4rem; */margin-right: .4rem;color: red;}.kin {width: .5333rem;height: .5333rem;vertical-align: middle;}.main-top {width: 10rem;height: 1.0667rem;background-color: white;}.radio2 input {width: .48rem;height: .9333rem;margin-left: .2667rem;margin-right: .5333rem;}.radio2 .ac {font-size: .32rem;}.radio2 {display: flex;justify-content: space-between;align-items: center;}.box2 span {font-size: .32rem;margin-right: .2667rem;}.box1 {display: inline-flex;align-items: center;}</style>
</head><body><script src="./flexible.js"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> --><div class="header"><div class="header-left"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiangzuojiantou"></use></svg></div><div class="header-middle">购物车(6)</div><div class="header-right"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-duanxinxiaoxixinxi"></use></svg></div></div><div class="main"><div class="main-top"><div class="radio2"><div class="box1"><input type="checkbox" id="checkAll"><img class="kin" src="./img/icon/icon-kin.png" alt=""><span class="ac">艾畅旗舰店</span></div><div class="box2"> <span>领劵</span> <span>编辑</span></div></div></div><ul><!-- <li><div class="radio"><input type="radio"></div><div class="img"><img src="./img/pd/sf-16.jpg"alt=""></div><div class="right"><h3>【黑卡96折】Apple苹果iPhone 7(A1660)移动联通电信4C手机国内...</h3><span class="color">重量:3.3kg颜色:标配版</span><div class="flex"><div id="red">¥100.00</div><div class="input"><button class="decrease">-</button><span class="input-inner">1</span><button class="increase">+</button></div></div></div></li> --></ul><div class="all">本店总计:¥<span class="digit">0.00</span></div></div><div class="footer"><div class="radio1"><input type="radio"></div><div class="footer-middle"><span class="select">全选</span><span class="total">合计: <span class="digitall">0.00</span> </span></div><div class="go"><span>去结算</span></div></div><script>const list = [{id: 1,url: "./img/pd/sf-16.jpg",count: 1,isChecked: false,price: 100},{id: 2,url: "./img/pd/sf-15.jpg",count: 3,isChecked: true,price: 100.00},{id: 3,url: "./img/pd/sf-14.jpg",count: 3,isChecked: false,price: 100.00},{id: 4,url: "./img/pd/sf-8.jpg",count: 3,isChecked: false,price: 100.00},{id: 5,url: "./img/pd/sf-9.jpg",count: 3,isChecked: false,price: 100.00},{id: 6,url: "./img/pd/sf-10.jpg",count: 3,isChecked: false,price: 100.00},{id: 7,url: "./img/pd/sf-11.jpg",count: 3,isChecked: false,price: 100.00},{id: 8,url: "./img/pd/sf-12.jpg",count: 3,isChecked: true,price: 100.00}]const checkAll = document.querySelector('#checkAll')function render() {let str = ''for (let i = 0; i < list.length; i++) {str += `<li data-id="${i}"><div class="radio"><input id="cks" type="checkbox"${list[i].isChecked ? 'checked' : ''} ></div><div class="img"><img src="${list[i].url}"alt=""></div><div class="right"><h3>【黑卡96折】Apple苹果iPhone 7(A1660)移动联通电信4C手机国内...</h3><span class="color">重量:3.3kg颜色:标配版</span><div class="flex"><div id="red">¥${list[i].price}</div><div class="input"><button class="decrease">-</button><span class="input-inner">${list[i].count}</span><button class="increase">+</button></div></div></div></li>`}checkAll.checked = list.every(ele => ele.isChecked === true)//被勾选组成的数组const newArr = list.filter(item => item.isChecked)//计算总价const totalPrice = newArr.reduce((prev, item) =>prev += item.count * item.price, 0)document.querySelector('.all .digit').innerHTML = totalPrice.toFixed(2)document.querySelector('.total .digitall').innerHTML = totalPrice.toFixed(2)document.querySelector('ul').innerHTML = str}render()const ul = document.querySelector('.main ul')ul.addEventListener('click', function (e) {//加if (e.target.className === 'increase') {const idx = e.target.parentNode.parentNode.parentNode.parentNode.dataset.idlist[idx].count++render()}//减if (e.target.className === 'decrease') {const idx = e.target.parentNode.parentNode.parentNode.parentNode.dataset.idlist[idx].count--if (list[idx].count <= 1) {list[idx].count = 1}render()}//多选一if (e.target.tagName === 'INPUT') {const idx = e.target.parentNode.parentNode.dataset.idlist[idx].isChecked = e.target.checkedrender()}})//单个商店的全选const cks = document.querySelectorAll('#cks')checkAll.addEventListener('click', function () {list.forEach(item => item.isChecked = this.checked)render()})</script></body></html>

效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/239801.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于iOS平台的车牌识别表情识别项目

基于iOS平台的车牌识别&&表情识别项目 简介 ​ 该项目客户端搭载于iOS平台&#xff0c;服务端搭载于阿里云服务器&#xff0c;主要功能是通过拍照或选取相册图片来进行车牌的识别以及人脸表情识别。本文便是对项目整体流程设计思路和具体实现做一个详细介绍。 整体实…

Android App程序应用未校验签名证书——————《风险等级高》

目录 应用签名未校验风险1、检测目的2、风险等级3、检测依据4、风险描述5、检测步骤6、结果描述7、解决方案7.1、Android 检验 APK 是否签名的代码7.2、检验APK签名 8、结尾 应用签名未校验风险 1、检测目的 检测App程序启动时是否校验签名证书。 防止App的盗版率。未进行签…

Set A Light 3D Studio for Mac - 构建逼真的照明场景!

Set A Light 3D Studio 是一款专业的照明设计和模拟软件&#xff0c;旨在帮助摄影师、电影制片人和视觉艺术家创建逼真的照明场景。无论你是在拍摄电影、广告、时尚杂志还是其他视觉艺术项目&#xff0c;这个软件都能帮助你实现你的创意想法。 Set A Light 3D Studio Mac版 ✨…

【C++入门到精通】 原子性操作库(atomic) C++11 [ C++入门 ]

阅读导航 引言一、原子性操作库简介二、原子变量1. 原子类型2. 原子类型函数3. 使用示例 三、总结温馨提示 引言 当谈及并发编程时&#xff0c;确保数据的安全性和一致性是至关重要的。在C11中引入的原子性操作库&#xff08;atomic&#xff09;为我们提供了一种有效且可靠的方…

2004年AMC8数学竞赛中英文真题典型考题、考点分析和答案解析

今天距离2024年的AMC8美国数学竞赛举办已不足一个月了&#xff0c;赶紧利用周末的时间刷刷真题&#xff0c;查漏补缺吧&#xff01;如果您有任何关于AMC8比赛的任何问题都可以问我&#xff0c;关于题目的解析也可以交流。 今天六分成长继续和您一起&#xff0c;从历年的真题中来…

Ubuntu 常用命令之 man 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 man命令在Ubuntu系统中是一个非常重要的命令&#xff0c;它用于查看系统的手册页。手册页是Linux和Unix系统中的一种在线文档&#xff0c;用于描述系统中的命令、函数、配置文件等的详细信息。 man命令的基本格式是 man [选项] …

FPC柔性线路板使用UV胶水的优势有哪些?

UV胶水在FPC柔性线路板的装配中具有明显的优势&#xff1a; 快速固化 UV胶水在紫外线照射后10秒左右迅速固化&#xff0c;因此它能够在短时间内完成连接。这非常有助于实际工业作业中提高生产效率&#xff0c;特别是在需要大批量生产的情况下。 精确控制固化时间 UV胶水的固…

pip 常用指令 pip cache 命令用法介绍

&#x1f4d1;pip 常用命令归类整理 pip cache 是一个用于管理pip缓存的命令。pip是Python的包管理器&#xff0c;用于安装和管理Python包。当你使用pip安装一个包时&#xff0c;pip会首先在其缓存中查找该包。如果在缓存中找到&#xff0c;pip将从缓存中安装该包&#xff0c;…

【ARM 安全系列介绍 3.4 -- 安全证书介绍】

文章目录 安全证书安全证书的主要组成部分安全证书的应用场景证书使用举例 证书格式PEM (Privacy Enhanced Mail)DER (Distinguished Encoding Rules)PKCS#7/P7B (Public Key Cryptography Standards #7)PKCS#12/PFX (Public Key Cryptography Standards #12)P7B 和 PFX/P12 的…

Vue 在同一个项目中,判断pc端和移动端,显示不同风格的页面(附pc端移动端显示效果图)

实现思路 1、修改index.html页面的meta 2、增加pc端移动端的判断 3、设置路由&#xff0c;根据不同的端&#xff0c;调用各自的路由&#xff0c;显示不同的页面 index.html 修改如下 <meta name"viewport" content"widthdevice-width,initial-scale1.0,minim…

51单片机模数转换ADC原理与代码一

51单片机模数转换ADC原理与代码一 1.概述 这篇文章是模数转换的入门文章&#xff0c;这篇文章主要介绍模数的概念、原理、核心指标、专业术语&#xff0c;以及一个模数转换的实例代码实现检测电位器的数值变化。 2.ADC介绍 2.1.ADC概念 ADC(Analog-to-Digital Converter)是…

tomcat和nginx自定义404错误页面

nginx 编辑nginx配置文件 vim /www/server/nginx/nginx.conf server{listen 80;error_page 404 /404.html;location /404.html{root /home/liu/html/error-html;} }在家目录下创建一个html/error-html目录&#xff0c;用于存放错误页面 在error-html目录下创建404.html&a…

node.js mongoose index(索引)

目录 简介 索引类型 单索引 复合索引 文本索引 简介 在 Mongoose 中&#xff0c;索引&#xff08;Index&#xff09;是一种用于提高查询性能的数据结构&#xff0c;它可以加速对数据库中文档的检索操作 索引类型 单索引、复合索引、文本索引、多键索引、哈希索引、地理…

ubuntu20 安装缺失的字体

在/usr/share/fonts创建文件夹winfonts sudo mkdir winfonts 下载缺失的字体后&#xff0c;复制命令到对应的文件夹。 刷新字体库 sudo mkfontscale sudo mkfontdir sudo fc-cache

十二、W5100S/W5500+RP2040之MicroPython开发<MQTT旧版OneNET示例>

文章目录 1. 前言2. 平台操作流程3. WIZnet以太网芯片4. 示例讲解以及使用4.1 程序流程图4.2 测试准备4.3 连接方式4.4 相关代码4.5 烧录验证 5. 注意事项6. 相关链接 1. 前言 在这个智能硬件和物联网时代&#xff0c;MicroPython和树莓派PICO正以其独特的优势引领着嵌入式开发…

人工智能_机器学习070_SVM支持向量机_软间隔及优化_硬间隔_衡量间隔软度_引入松弛变量_理解隔离参数---人工智能工作笔记0110

我们继续说,之前说的C是什么意思? 我们在这个软间隔优化中就可以引出C 可以看到之前我们讨论的问题,都是基于样本点的,完全的线性可分的问题,我们称为硬间隔 可以看到这种,一分就可以,分开,简单分割就可以分开的数据,我们称之为硬间隔 但是可以看到上面这种情况,无论怎么分,都…

智能硬件(6)之通用引脚(GPIO)

小编带领大家学习的四大开源硬件和智能模块&#xff0c;他们之间是如何通信的&#xff0c;主控芯片是如何控制智能模块&#xff0c;做某些事情呢&#xff1f;有没有小朋友发起疑问呢&#xff1f; 这里&#xff0c;涉及到了特别重要的知识点&#xff0c;就是通用引脚&#xff0c…

Apache Flink 进阶教程(六):Flink 作业执行深度解析

目录 前言 Flink 四层转化流程 Program 到 StreamGraph 的转化 StreamGraph 到 JobGraph 的转化 为什么要为每个 operator 生成 hash 值&#xff1f; 每个 operator 是怎样生成 hash 值的&#xff1f; JobGraph 到 ExexcutionGraph 以及物理执行计划 Flink Job 执行流程…

华为端口隔离简单使用方法同vlan下控制个别电脑不给互通

必须得用access接口&#xff0c;hybrid口不行 dhcp enable interface Vlanif1 ip address 192.168.1.1 255.255.255.0 dhcp select interface interface MEth0/0/1 interface GigabitEthernet0/0/1 port link-type access port-isolate enable group 1 interface GigabitEther…

【大模型实践】基于文心一言的对话模型设计

文心一言&#xff08;英文名&#xff1a;ERNIE Bot&#xff09;是百度全新一代知识增强大语言模型&#xff0c;文心大模型家族的新成员&#xff0c;能够与人对话互动、回答问题、协助创作&#xff0c;高效便捷地帮助人们获取信息、知识和灵感。文心一言从数万亿数据和数千亿知识…