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

这篇具有很好参考价值的文章主要介绍了HTML+JS+CSS移动端购物车选购界面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

关键部分说明:

UIGoods 类:
  • 构造函数: 创建 UIGoods 实例时,传入商品数据 g,初始化商品的数据和选择数量。
  • getTotalPrice() 方法: 计算商品的总价,考虑了选择数量。
  • isChoose() 方法: 判断是否选中该商品。
  • increase() 方法: 增加商品的选择数量。
  • decrease() 方法: 减少商品的选择数量,但数量不会小于 0。
class UIGoods {
  constructor(g) {
    this.data = g
    this.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 = uiGoods
    this.startSendPrice = 30
    this.needSendPrice = 5
  }

  getTotalPrice() {
    let sum = 0
    this.uiGoods.forEach((item, index) => {
      sum += item.getTotalPrice()
    })
    return sum
  }

  increase(index) {
    this.uiGoods[index].increase()
  }

  decrease(index) {
    this.uiGoods[index].decrease()
  }

  getTotalChooseNum() {
    let sum = 0
    this.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 = jumpTarget

    this.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) {
    // 商品选择数量变化的跳跃抛物线动画
    // ...省略具体实现...
  }
}

注意:

文章说明:该功能是根据“渡一前端”视频敲出来的,并不属于原创,但是转载或是翻译的连接我找不到了,所以使用的原创标签,特此说明一下。文章来源地址https://www.toymoban.com/news/detail-783677.html

到了这里,关于HTML+JS+CSS移动端购物车选购界面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML淘宝购物车页面的实现

    一、实验目的和要求 本实验任务用HTML基本标签制作一个简单的淘宝购物车页面,具体要求如下: 以纯文本格式保存为*.html文件 使用表格标签、div标签、span标签、图像标签等实现效果设计 启用浏览器,打开该文件或在地址栏中直接输入存放该文件的地址 二、 实验原理 首先

    2024年02月11日
    浏览(46)
  • js实现购物车

    ### 嘎嘎原生,看就完了 ### # # html部分 ### css部分 ### js部分

    2024年01月21日
    浏览(52)
  • Bootstrap03购物车页面&登录注册界面&其他组件使用

    目录 案例1:实现购物车页面布局 效果图  案例2:实现登录注册界面 效果图  案例3:图标组件的使用 效果图  熟悉其他的(页面内容-组件)等效果 页面内容:表格-Table 组件:按钮-Buttons 表单组件:Forms 折叠 滚动监听 下拉菜单 分页 导航-面包屑导航等等

    2024年02月03日
    浏览(55)
  • HTML购物车示例(勾选、删除、添加和结算功能)

    以下是一个简单的HTML购物车示例,包含勾选、删除、添加和结算功能。结算功能使用PHP实现,可以获取选中商品的ID。 以下是一个简单的HTML购物车示例,包含勾选、删除、添加和结算功能。结算功能使用PHP实现,可以获取选中商品的ID`以下是一个简单的HTML购物车示例,包含

    2024年02月04日
    浏览(46)
  • 记录-JS简单实现购物车图片局部放大预览效果

    代码不多,先看一下 HTML 里面结构很简单,初始化 MagnifyingGlass 对象来关联一个 IMG 标签来实现放大。 再看一下 MagnifyingGlass 上面的就是全部逻辑,实现方法肯定不是最优的,但是其中可以联想到通过像素点的操作实现任意效果。 可以启动一个 node 本地服务,首先见一个

    2023年04月20日
    浏览(78)
  • 使用Vue.js框架的指令和事件绑定实现一个购物车的页面布局

    使用了v-model指令来实现全选/全不选的功能,当全选框被点击时,isAllChecked的值会被改变。 使用了v-if指令来判断购物车中是否有商品,如果有商品则渲染商品列表,否则显示购物车为空的提示。 使用了v-for指令来遍历datalist数组,渲染每个商品项。 使用了@change事件来监听商

    2024年02月12日
    浏览(53)
  • 使用JavaScript和Vue.js框架开发的电子商务网站,实现商品展示和购物车功能

    引言: 随着互联网的快速发展和智能手机的普及,电子商务行业正迎来一个全新的时代。越来越多的消费者选择网上购物,而不再局限于传统的实体店。这种趋势不仅仅是改变了消费者的习惯购物,也给企业带来了巨大的商机。为了不断满足消费者的需求,电子商务网站需要

    2024年02月15日
    浏览(54)
  • Vue项目商品购物车前端本地缓存逻辑(适用H5/ipad/PC端)——前端实现购物车删除商品、购物车增减数量,清空购物车功能

    Vue3 + Vite + Ts开源后台管理系统模板 基于ElementUi或AntdUI再次封装基础组件文档 基于Element-plus再次封装基础组件文档(vue3+ts)

    2024年02月12日
    浏览(47)
  • Android商城开发----点击加入购物车,购物车商品的增删减

    上一章节:【分类页面】点击左侧类别,实现右侧对应类别商品的展示 本文是在上一章节基础上开发的,点击【分类】页面商品的加入购物车按钮,实现将商品加入购物车的功能。 本文主要实现的功能是: 1.点击加入购物车按钮,将商品加入购物车。 2.点击相同的商品加入

    2024年02月03日
    浏览(59)
  • JavaWeb购物系统(五)购物车模块的实现

    未添加商品效果图 添加商品之后的效果图 添加商品 购物车中商品的数量增加、减少、通过键盘输入改变数量 清空购物车 计算购物车商品的总价格 我们的购物车采用的是在服务端,即:使用session来存储。这样做的 缺点 :无法永久存储,当服务端关闭的时候,会销毁。 优点

    2024年02月07日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包