当前位置: 首页 > news >正文

HTML+JS+CSS移动端购物车选购界面

代码打包资源下载:【免费】HTML+JS+CSS移动端购物车选购界面资源-CSDN文库

关键部分说明:

UIGoods 类:
  • 构造函数: 创建 UIGoods 实例时,传入商品数据 g,初始化商品的数据和选择数量。
  • getTotalPrice() 方法: 计算商品的总价,考虑了选择数量。
  • isChoose() 方法: 判断是否选中该商品。
  • increase() 方法: 增加商品的选择数量。
  • decrease() 方法: 减少商品的选择数量,但数量不会小于 0。
class UIGoods {constructor(g) {this.data = gthis.choose = 0}getTotalPrice() {return this.data.price * this.choose}isChoose() {return this.choose > 0}increase() {this.choose++}decrease() {if (this.choose === 0) {return}this.choose--}
}
UIData 类:
  • 构造函数: 初始化页面数据,包括商品列表、起送价格和配送费。
  • getTotalPrice() 方法: 计算购物车中所有商品的总价。
  • increase(index)decrease(index) 方法: 分别用于增加和减少某个商品的选择数量。
  • getTotalChooseNum() 方法: 获取购物车中所有商品的总选择数量。
  • isGoodsInCar() 方法: 判断购物车中是否有商品。
  • isStartSendPrice() 方法: 判断是否达到起送价格。
  • isChoose(index) 方法: 判断某个商品是否被选中。
class UIData {constructor() {let uiGoods = []goods.forEach(item => {let uig = new UIGoods(item)uiGoods.push(uig)})this.uiGoods = uiGoodsthis.startSendPrice = 30this.needSendPrice = 5}getTotalPrice() {let sum = 0this.uiGoods.forEach((item, index) => {sum += item.getTotalPrice()})return sum}increase(index) {this.uiGoods[index].increase()}decrease(index) {this.uiGoods[index].decrease()}getTotalChooseNum() {let sum = 0this.uiGoods.forEach((item) => {sum += item.choose})return sum}isGoodsInCar() {return this.getTotalChooseNum() > 0}isStartSendPrice() {return this.getTotalPrice() > this.startSendPrice}isChoose(index) {return this.uiGoods[index].isChoose()}
}
UI 类:
  • 构造函数: 初始化页面和事件监听。
  • creatHTML() 方法: 根据商品数据创建商品元素的 HTML 结构,用于初始化页面。
  • increase(index)decrease(index) 方法: 用于增加和减少商品选择数量,同时更新页面显示。
  • updateGoodsItem(index)updateFooter() 方法: 更新商品元素和页脚的显示状态。
  • carAnimate()jump(index) 方法: 分别处理购物车动画和商品选择数量变化的跳跃抛物线动画。
class UI {constructor() {// ...(省略其他初始化和元素获取的代码)let carRect = this.doms.car.getBoundingClientRect()let jumpTarget = {x: carRect.left + carRect.width / 2,y: carRect.top + carRect.height / 5}this.jumpTarget = jumpTargetthis.creatHTML()this.updateFooter()this.listenEvent()}// ...(省略其他方法)creatHTML() {let html = ''this.uiData.uiGoods.forEach((item, index) => {html += `<div class="goods-item"><!-- ...省略商品元素的HTML结构... --></div>`})this.doms.goodsContainer.innerHTML = html}increase(index) {this.uiData.increase(index)this.updateGoodsItem(index)this.updateFooter()this.jump(index)}decrease(index) {this.uiData.decrease(index)this.updateGoodsItem(index)this.updateFooter()}// ...(省略其他方法)updateGoodsItem(index) {// 更新商品元素的显示状态// ...省略具体实现...}updateFooter() {// 更新页脚的显示状态// ...省略具体实现...}carAnimate() {this.doms.car.classList.add('animate')}jump(index) {// 商品选择数量变化的跳跃抛物线动画// ...省略具体实现...}
}

注意:

文章说明:该功能是根据“渡一前端”视频敲出来的,并不属于原创,但是转载或是翻译的连接我找不到了,所以使用的原创标签,特此说明一下。

相关文章:

HTML+JS+CSS移动端购物车选购界面

代码打包资源下载&#xff1a;【免费】HTMLJSCSS移动端购物车选购界面资源-CSDN文库 关键部分说明&#xff1a; UIGoods 类&#xff1a; 构造函数&#xff1a; 创建 UIGoods 实例时&#xff0c;传入商品数据 g&#xff0c;初始化商品的数据和选择数量。getTotalPrice() 方法…...

微服务治理:为什么要分析微服务的依赖关系?

在微服务架构中&#xff0c;单个服务相互协作以交付功能。这些协作会在服务之间形成依赖关系&#xff0c;其中一个服务依靠另一个服务来完成自己的任务。虽然依赖关系使功能得以实现&#xff0c;但不受控制的依赖关系可能会导致一系列挑战&#xff1a; 复杂性: 错综复杂的依赖…...

【程序员的自我修养—系统调用与API】

系统调用 背景&#xff1a; 为了避免有限的系统资源被多个不同的应用程序同时访问&#xff0c;需要加以保护&#xff0c;避免冲突&#xff1b;提供一套统一的接口&#xff0c;是应用程序能做一些由操作系统支持的行为&#xff1b;接口通过中断的方式实现&#xff0c;Linux使用…...

使用宝塔面板部署后端项目到服务器

文章目录 前言第一步&#xff1a;安装数据库第二步&#xff1a;打包后端项目第三步&#xff1a;配置数据库第四步&#xff1a;部署后端项目第五步&#xff1a;前后端联调测试总结 前言 在之前我已经写了一篇如何去部署前端项目&#xff0c;虽然能访问网站&#xff0c;但是没有…...

走迷宫(c语言)

前言&#xff1a; 制作一个迷宫游戏是一个有趣的编程挑战。首先&#xff0c;我们需要设计一个二维数组来表示迷宫的布局&#xff0c;其中每个元素代表迷宫中的一个格子。我们可以使用不同的值来表示空格、墙壁和起点/终点。接下来&#xff0c;我们需生成迷宫。在生成迷宫的过程…...

两周掌握Vue3(五):自定义指令、路由、ajax

文章目录 一、自定义指令1.创建和使用自定义指令2.钩子函数3.使用参数 二、路由1.创建一个router实例2.在components目录中创建组件3.将路由实例挂载到应用4.使用路由 三、Ajax 代码仓库&#xff1a;跳转 当前分支&#xff1a;05 一、自定义指令 自定义指令是Vue.js框架提供的…...

redis之单线程和多线程

目录 1、redis的发展史 2、redis为什么选择单线程&#xff1f; 3、主线程和Io线程是怎么协作完成请求处理的&#xff1f; 4、IO多路复用 5、开启redis多线程 1、redis的发展史 Redis4.0之前是用的单线程&#xff0c;4.0以后逐渐支持多线程 Redis4.0之前一直采用单线程的主…...

12AOP面向切面编程/GoF之代理模式

先看一个例子&#xff1a; 声明一个接口&#xff1a; // - * / 运算的标准接口! public interface Calculator {int add(int i, int j);int sub(int i, int j);int mul(int i, int j);int div(int i, int j); }实现该接口&#xff1a; package com.sunsplanter.prox…...

【MySQL】数据处理之增删改

文章目录 一、增加&#xff08;插入&#xff09;INSERT INTO...VALUES(...,...)VALUES的方式添加情况一&#xff1a;为表的所有字段按默认顺序插入数据情况二&#xff1a;为表的指定字段插入数据情况三&#xff1a;同时插入多条记录 将查询结果插入到表中 二、修改&#xff08;…...

利用docker的LNMP

目录 服务器环境 任务需求 服务搭建 Nginx Mysql Php 启动 wordpress 服务 服务器环境 容器 操作系统 IP地址 主要软件 nginx CentOS 7 172.20.0.10 Docker-Nginx mysql CentOS 7 172.20.0.20 Docker-Mysql php CentOS 7 172.2…...

Grafana(二)Grafana 两种数据源图表展示(json-api与数据库)

一. 背景介绍 在先前的博客文章中&#xff0c;我们搭建了Grafana &#xff0c;它是一个开源的度量分析和可视化工具&#xff0c;可以通过将采集的数据分析、查询&#xff0c;然后进行可视化的展示&#xff0c;接下来我们重点介绍如何使用它来进行数据渲染图表展示 Docker安装G…...

Shape-IoU——综合考量边框形状与尺度的度量

今天看到一篇文章主要是提出了一种更有效的IOU度量方法&#xff0c;论文地址在这里&#xff0c;如下所示&#xff1a; 摘要 边界盒回归损失作为检测器定位分支的重要组成部分&#xff0c;在目标检测任务中起着重要作用。现有的边界框回归方法通常考虑GT框和预测框之间的几何关…...

Stack详解(Java)

Stack Java 中的 Stack 是一种基于后进先出&#xff08;LIFO&#xff09;原则的数据结构。Stack 类实现了一个标准的堆栈&#xff0c;它继承自 Vector 类&#xff0c;并提供了一些额外的方法来支持堆栈的操作。 下面是一些 Java Stack 类的详细解释&#xff1a; 构造方法&…...

Qt框架学习 --- CTK编译(Qt5.15.2+vs2019+cmake)

系列文章目录 第二章 CTK的测试demo https://blog.csdn.net/yonug1107716573/article/details/135527289 文章目录 系列文章目录前言一、准备工作二、编译步骤1.修改文件2.编译CTK2.1 准备2.2 cmake界面配置2.3 配置编译器2.4 编译的配置设置2.5 选择需要编译的模块2.6 生成2.…...

Flink(十三)【Flink SQL(上)】

前言 最近在假期实训&#xff0c;但是实在水的不行&#xff0c;三天要学完SSM&#xff0c;实在一言难尽&#xff0c;浪费那时间干什么呢。SSM 之前学了一半&#xff0c;等后面忙完了&#xff0c;再去好好重学一遍&#xff0c;毕竟这玩意真是面试必会的东西。 今天开始学习 Flin…...

linux nginx配置链接访问图片

nginx 安装 sudo apt update sudo apt install nginxnginx 启动命令 sudo systemctl restart nginx # 重启 sudo systemctl start nginx #开启 sudo systemctl stop nginx # 关闭 sudo systemctl status nginx # 状态 sudo systemctl restart nginx.service #重启nginx安装成…...

深度学习笔记(二)——Tensorflow环境的安装

本篇文章只做基本的流程概述&#xff0c;不阐述具体每个软件的详细安装流程&#xff0c;具体的流程网上教程已经非常丰富。主要是给出完整的安装流程&#xff0c;以供参考 环境很重要 一个好的算法环境往往能够帮助开发者事半功倍&#xff0c;入门学习的时候往往搭建好环境就已…...

Java实现在线编辑预览office文档

文章目录 1 在线编辑1.1 PageOffice简介1.2 前端项目1.2.1 配置1.2.2 页面部分 1.3 后端项目1.3.1 pom.xml1.3.2 添加配置1.3.3 controller 2 在线预览2.1 引言2.2 市面上现有的文件预览服务2.2.1 微软2.2.2 Google Drive查看器2.2.3 阿里云 IMM2.2.4 XDOC 文档预览2.2.5 Offic…...

阿里云OSS上传视频,可分片上传

uniappH5实现 阿里云OSS上传视频 示例图&#xff1a; 上传视频完整示例代码&#xff1a; 使用npm安装SDK开发包&#xff0c;安装命令为 npm install ali-oss --save accessKeyId 和 accessKeySecret 还有 bucket 替换成你的就行。 multipartUpload 的第一个入参是&#x…...

Linux第三次课后作业

1.使用while和until语句编写脚本程序&#xff0c;计算1到100的和。 i1 s0 while(i<100) {sii} echo(s)sum0 i0 until test $num -eq 101 do #下面两个均为反斜杠 sumexpr $sum $i iexpr $num 1 done echo "the result is $sum"2.编写脚本程序备份用户指定的文件…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...