学习记录-cssjs-综合复习案例（二）

news2025/3/22 21:14:08

目录

  • 商城复合案例功能实现（二）
  • 商城首页实现步骤
      • 1.准备工作
      • 2. 搭建html框架
      • 3. 编写js代码
  • 完整实例代码
  • 完整项目心得

商城复合案例功能实现（二）

  1. 使用html，css，基于bootstrap框架以及媒体查询搭建响应式布局页面
  2. 案例共三页，包括首页板块，女装板块，以及单个商品板块，单击互相跳转
  3. 女装页包括tab栏，映射，数据筛选等功能，单个商品页包括轮播图，tab栏，商品放大镜，映射等功能，首页包含轮播图，映射等功能

商城首页实现步骤

1.准备工作

  1. 首页与女装页放在同一页面，通过tab栏切换各个板块的dispaly，实现切换页面的效果
  2. 女装页和男装，特惠，其它页面结构相似，可以只进行标题的修改，剩下照搬

2. 搭建html框架

商品首页
在这里插入图片描述

代码

		<div class="container home page">
    <div class="slider">
      <img src="../assets/upholds/slider0.png" alt="">
      <ul>
        <li data-id="0" class="active"></li>
        <li data-id="1"></li>
        <li data-id="2"></li>
      </ul>
      <button>购买</button>
    </div>
    <div class="topic-one">
      <h3>私人定制，纯手工打造</h3>
      <div>精选优选自中国新疆阿克苏的高纯白棉花制造的面料，来自英国服装设计大量大卫团队精心设计，时尚而又舒适</div>
    </div>
    <div class="home-content row">
      <div class="col-12 col-xl-6 col-lg-6"><a href="javascript:;"
          style="background: url(../assets/upholds/home-content1.png) -50px;">
          <div class="mb">男装</div>
        </a></div>
      <div class="col-6 col-xl-3 col-lg-3 class=" col-12 col-md-12""><a href="javascript:;"
          style="background: url(../assets/upholds/home-content3.png) -50px;">
          <div class="mb">推荐</div>
        </a></div>
      <div class="col-6 col-xl-3 col-lg-3"><a href="javascript:;"
          style="background: url(../assets/upholds/home-content4.png) -50px;">
          <div class="mb">首页</div>
        </a></div>
      <div class="col-6 col-xl-3 col-lg-3"><a href="javascript:;"
          style="background: url(../assets/upholds/home-content6.png) -50px;">
          <div class="mb">特价</div>
        </a></div>
      <div class="col-6 col-xl-3 col-lg-3"><a href="javascript:;"
          style="background: url(../assets/upholds/home-content5.png) -50px;">
          <div class="mb">箱包</div>
        </a></div>
      <div class="col-12 col-xl-6 col-lg-6"><a href="javascript:;"
          style="background: url(../assets/upholds/home-content2.png) -50px;">
          <div class="mb">女装</div>
        </a></div>
    </div>
    <div class="topic-two">
      <h3>今年流行</h3>
    </div>
    <!-- 其他服饰 -->
    <div class="other-content">
      <div class="other-costume">
        <ul class="row">

        </ul>
      </div>
    </div>
    <div class="topic-three">
      <h3>最新时装介绍</h3>
    </div>
    <div class="home-new row">
      <div class="col-12 col-md-4 col-lg-4"><a href="javascript:;"
          style="background: url(../assets/upholds/new-content1.png);">
          <div class="mb">
            <div class="content">穿着自己最喜爱的时尚衣服去喝
              咖啡，咖啡的味道如此美好...</div>
            <div class="date">2018-7-16</div>
          </div>
        </a></div>
      <div class="col-12 col-md-4 col-lg-4"><a href="javascript:;"
          style="background: url(../assets/upholds/new-content2.png);">
          <div class="mb">
            <div class="content">穿着自己最喜爱的时尚衣服去看大海
              大海是如此的美好...</div>
            <div class="date">2018-7-16</div>
          </div>
        </a></div>
      <div class="col-12 col-md-4 col-lg-4"><a href="javascript:;"
          style="background: url(../assets/upholds/new-content3.png);">
          <div class="mb">
            <div class="content">穿着自己最喜爱的时尚衣服去户外
              生活是如此的美好...</div>
            <div class="date">2018-7-16</div>
          </div>
        </a></div>
    </div>
    <div class="register">
      <h3>注册送大礼</h3>
      <div>注册我们网站的新用户，我们将送一份礼物给你，你只需注册后留下地址和手机号码即可</div>
      <div class="search">
        <input type="text" placeholder="你的邮箱">
        <button>订阅</button>
      </div>
    </div>
  </div>

实现效果
在这里插入图片描述

3. 编写js代码

首页轮播图
事件委托和自定义属性

	const slider = document.querySelector('.home .slider')
	const img = document.querySelector('.slider img')
	const lis = document.querySelectorAll('.slider li')
	let timer
	let num = 0
	function autoPlay() {
	  timer = setInterval(() => {
	    num++
	    if (num >= 3) {
	      num = 0
	    }
	    img.src = `../assets/upholds/slider${num}.png`
	    lis.forEach(li => {
	      li.classList.remove('active')
	    })
	    lis[num].classList.add('active')
	  }, 2000)
	}
	slider.addEventListener('mouseenter', () => {
	  clearInterval(timer)
	})
	slider.addEventListener('mouseleave', () => {
	  autoPlay()
	})
	autoPlay()
	slider.addEventListener('click', (e) => {
	  if (e.target.tagName === 'LI') {
	    img.src = `../assets/upholds/slider${e.target.dataset.id}.png`
	    lis.forEach(li => {
	      li.classList.remove('active')
	    })
	    lis[e.target.dataset.id].classList.add('active')
	  }
	})

实现效果
在这里插入图片描述

鼠标移入出现蒙版

	const masks = document.querySelectorAll('.home-content a')
	console.log(masks)
	masks.forEach(mask => {
	  mask.addEventListener('mouseenter', () => {
	    mask.children[0].style.display = 'block'
	  })
	  mask.addEventListener('mouseleave', () => {
	    mask.children[0].style.display = 'none'
	  })
	})

实现效果
在这里插入图片描述

tab栏切换板块

  1. 因为商品板块全都是映射得来的，所以在每次渲染完页面后都要重复进行部分js操作，最好将部分js步骤给封装起来，方便复用
	const nav = document.querySelector('.nav')
	const pages = document.querySelectorAll('.page')
	nav.addEventListener('click', function (e) {
	  if (e.target.tagName === 'A') {
	    const randomArr = []
	    for (let i = 0; i < 12; i++) {
	      const random = Math.floor(Math.random() * initData.length)
	      randomArr.push(initData[random])
	    }
	    document.querySelector('.nav .active').classList.remove('active')
	    e.target.classList.add('active')
	    pages.forEach(items => {
	      items.style.display = 'none'
	    })
	    pages[e.target.dataset.id].style.display = 'block'
	    addData(randomArr)
	    addImg()
	  }
	})

实现效果
在这里插入图片描述
tab栏数据筛选

const femaleNav = document.querySelectorAll('.female-nav')
femaleNav.forEach(nav => {
  nav.addEventListener('click', (e) => {
    femaleNav[0].classList.add('active')
    if (e.target.tagName === 'A') {
      document.querySelectorAll('.female-nav .active').forEach(item => {
        item.classList.remove('active')
      })

      e.target.classList.add('active')
      if (e.target.dataset.id === '0') {
        addData(initData)
        cx()
      }
      if (e.target.dataset.id === '1') {
        const arr = initData.filter(item => {
          return item.status === '特价'
        })
        addData(arr)
        cx()
      }
      if (e.target.dataset.id === '2') {
        const arr = initData.filter(item => {
          return item.status === ''
        })
        addData(arr)
        cx()
      }
      if (e.target.dataset.id === '3') {
        const arr = initData.filter(item => {
          return item.price < 200 && item.discount !== ''
        })
        addData(arr)
        cx()
      }
      if (e.target.dataset.id === '4') {
        const arr = initData.filter(item => {
          return item.price < 150 || item.discount < 150 && item.discount !== ''
        })
        addData(arr)
        cx()
      }
    }
  })
})

实现效果
在这里插入图片描述

商品渲染进阶
当所得数据存在discount时，price所在数字出现中划线

		function cx() {
	  const price = document.querySelectorAll('.other-costume .price')
	  const discount = document.querySelectorAll('.other-costume .discount')
	  for (let i = 0; i < price.length; i++) {
	    if (discount[i].innerHTML !== '') {
	      price[i].children[0].style.textDecoration = 'line-through'
	    }
	  }
	}
	window.onload = cx

当所得数据的status为特价或者售完，会将其标识在商品左上角中

	arr.filter(({ name, price, discount, src, status }) => {
	    let soldStatus
	    if (status === '售完') {
	      soldStatus = 'out'
	    } else if (status === '特价') {
	      soldStatus = 'free'
	    } else {
	      soldStatus = ''
	    }

完整实例代码

见所上传资料

完整项目心得

通过此次项目，我复习了css，less，bootstrap栅格化，媒体查询等知识，使自己可以还原百分之八十以上的静态页面，同时，我也使用了最近学过的轮播图，tab栏，数据筛选，等所有知识，我深刻的了解到了框架的重要性，如果只使用原生代码，会导致包括变量名冲突等一系列问题，接下来我将继续学习，会记录一些前端面试题，同时准备接下来的暑期实习。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

图解AUTOSAR_CP_EEPROM_Abstraction

图解AUTOSAR_CP_EEPROM_Abstraction

AUTOSAR EEPROM抽象模块详细说明 基于AUTOSAR标准的EEPROM抽象层技术解析 目录 1. 概述 1.1 核心功能1.2 模块地位2. 架构概览 2.1 架构层次2.2 模块交互3. 配置结构 3.1 主要配置容器3.2 关键配置参数4. 状态管理 4.1 基本状态4.2 状态转换5. 接口设计 5.1 主要接口分类5.2 接…
阅读更多...
汇川EASY系列之以太网通讯（MODBUS_TCP做从站）

汇川EASY系列之以太网通讯（MODBUS_TCP做从站）

汇川easy系列PLC做MODBUS_TCP从站，不需要任何操作，但是有一些需要知道的东西。具体如下： 1、汇川easy系列PLC做MODBUS_TCP从站，，ModbusTCP服务器默认开启，无需设置通信协议（即不需要配置），端口号为“502”。ModbusTCP从站最多支持31个ModbusTCP客户端（ModbusTCP主站…
阅读更多...
QT 图表（拆线图，栏状图，饼状图 ,动态图表）

QT 图表（拆线图，栏状图，饼状图 ,动态图表）

效果 折线图 // 创建折线数据系列// 创建折线系列QLineSeries *series new QLineSeries;// series->append(0, 6);// series->append(2, 4);// series->append(3, 8);// 创建图表并添加系列QChart *chart new QChart;chart->addSeries(series);chart->setTit…
阅读更多...
基于vue框架的在线影院系统a079l（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。

基于vue框架的在线影院系统a079l（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,电影,电影类别,电影库 开题报告内容 基于Vue框架的在线影院系统开题报告 一、研究背景与意义 随着文化娱乐产业的蓬勃发展&#xff0c;电影院作为人们休闲消遣的重要场所&#xff0c;其管理效率和服务质量直接影响着顾客的观影体…
阅读更多...
OpenCV图像拼接（1）概述

OpenCV图像拼接（1）概述

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 此图说明了在Stitcher类中实现的拼接模块流程。使用该类&#xff0c;可以配置/移除某些步骤&#xff0c;即根据特定需求调整拼接流程。流程中的所…
阅读更多...
基于ssm学科竞赛小程序的设计及实现(源码+lw+部署文档+讲解)，源码可白嫖!

基于ssm学科竞赛小程序的设计及实现(源码+lw+部署文档+讲解)，源码可白嫖!

摘要 随着信息时代的来临&#xff0c;过去的学科竞赛管理方式的缺点逐渐暴露&#xff0c;本次对过去的学科竞赛管理方式的缺点进行分析&#xff0c;采取计算机方式构建学科竞赛小程序。本文通过阅读相关文献&#xff0c;研究国内外相关技术&#xff0c;提出了一种关于竞赛信息…
阅读更多...
[特殊字符][特殊字符][特殊字符][特殊字符][特殊字符][特殊字符]壁紙 流光染墨，碎影入梦

[特殊字符][特殊字符][特殊字符][特殊字符][特殊字符][特殊字符]壁紙 流光染墨，碎影入梦

#Cosplay #&#x1f9da;‍♀️Bangni邦尼&#x1f430;. #&#x1f4f7; 穹妹 Set.01 #后期圈小程序 琼枝低垂&#xff0c;霜花浸透夜色&#xff0c;风起时&#xff0c;微光轻拂檐角&#xff0c;洒落一地星辉。远山隐于烟岚&#xff0c;唯余一抹青黛&#xff0c;勾勒出天光水…
阅读更多...
虚拟机的三种 Linux 网络配置原理图解读

虚拟机的三种 Linux 网络配置原理图解读

前言 虚拟机的网络连接方式主要有 三种模式&#xff1a;桥接模式&#xff08;Bridged&#xff09;、NAT 模式&#xff08;Network Address Translation&#xff09;、仅主机模式&#xff08;Host-Only&#xff09;。每种模式都有不同的使用场景和网络适应性&#xff0c;具体解释…
阅读更多...
AI Agent系列(七) -思维链(Chain of Thought,CoT)

AI Agent系列(七) -思维链(Chain of Thought,CoT)

AI Agent系列【七】 前言一、CoT技术详解1.1 CoT组成1.2 CoT的特点 二、CoT的作用三、CoT的好处四、CoT适用场景五、CoT的推理结构 前言 思维链(Chain of Thought,CoT)&#xff0c;思维链就是一系列中间的推理步骤(a series of intermediate reasoning steps)&#xff0c;通过…
阅读更多...
SpringBoot实现异步调用的方法

SpringBoot实现异步调用的方法

在Java中使用Spring Boot实现异步请求和异步调用是一个常见的需求&#xff0c;可以提高应用程序的性能和响应能力。以下是实现这两种异步操作的基本方法&#xff1a; 一、异步请求&#xff08;Asynchronous Request&#xff09; 异步请求允许客户端发送请求后立即返回&#x…
阅读更多...
PurpleLlama大模型安全全套检测方案

PurpleLlama大模型安全全套检测方案

1. 引入 PurpleLlama是Meta的大模型安全整体解决方案&#xff08;参考1&#xff09;&#xff0c;它包括了 &#xff08;1&#xff09;安全评估 CyberSecEval是一个用于评估大型语言模型&#xff08;LLMs&#xff09;安全风险的基准套件&#xff0c;其目标是解决随着 LLMs 的广…
阅读更多...
vue el-table 设置selection选中状态

vue el-table 设置selection选中状态

toggleRowSelection 方法 vue el-table 设置selection选中状态 关键代码 multipleTableRef.value!.toggleRowSelection(item, true);<el-table:data"data":border"setBorder"v-bind"$attrs"row-key"id"stripestyle"width: 1…
阅读更多...
STM32学习笔记之常用总线（原理篇）

STM32学习笔记之常用总线（原理篇）

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…
阅读更多...
【数据结构】栈(Stack)、队列(Queue)、双端队列(Deque) —— 有码有图有真相

【数据结构】栈(Stack)、队列(Queue)、双端队列(Deque) —— 有码有图有真相

目录 栈和队列 1. 栈&#xff08;Stack&#xff09; 1.1 概念 1.2 栈的使用&#xff08;原始方法&#xff09; 1.3 栈的模拟实现 【小结】 2. 栈的应用场景 1、改变元素的序列 2、将递归转化为循环 3、逆波兰表达式求值 4、括号匹配 5、出栈入栈次序匹配 6、最小栈…
阅读更多...
OpenCV中的矩阵操作

OpenCV中的矩阵操作

OpenCV中的矩阵操作主要围绕Mat类展开&#xff0c;涵盖创建、访问、运算及变换等。 1. 创建矩阵 ‌零矩阵/单位矩阵‌&#xff1a; Mat zeros Mat::zeros(3, 3, CV_32F); // 3x3浮点零矩阵 Mat eye Mat::eye(3, 3, CV_32F); // 3x3单位矩阵 自定义初始化‌&#xff1a…
阅读更多...
OAK相机入门（一）：深度测距原理

OAK相机入门（一）：深度测距原理

文章目录 1. 测距参数介绍2. 测距原理3. 总结 官方文档 Configuring Stereo Depth 1. 测距参数介绍 理论范围&#xff1a;0.2-35m 推荐范文&#xff1a;不低于0.5m 存储类型&#xff1a;uint16&#xff0c;0代表没有数据&#xff0c;或者测不到 2. 测距原理 通过视差进行测距…
阅读更多...
Powershell WSL .wslconfig 实现与宿主机的网络互通

Powershell WSL .wslconfig 实现与宿主机的网络互通

前言.wslconfig .wslconfig 用于在 WSL 2 上运行的所有已安装发行版中配置全局设置 wsl 2 网络模式介绍 Bridged (外部): 桥接模式将虚拟机的网络连接直接桥接到物理网络适配器上Mirrored (镜像): 镜像模式并不是一个标准的 Hyper-V 网络类型，但它通常指的是在网络适配器级…
阅读更多...
Vue：Vue2和Vue3创建项目的几种常用方式以及区别

Vue：Vue2和Vue3创建项目的几种常用方式以及区别

前言 Vue.js 和 Element UI 都是用 JavaScript 编写的。 1、Vue.js 是一个渐进式 JavaScript 框架。2、Element UI 是基于 Vue.js 的组件库。3、JavaScript 是这两个项目的主要编程语言。 而Element Plus是基于TypeScript开发的。 一、Vue2 1、基于vuecli工具创建 vue2 …
阅读更多...
IRF拆除

IRF拆除

冗余口、冗余组、备份组、虚墙、MAD检测、被控制器纳管、转换为安全策略 黑洞路由的定义: 有来无回的路由。 对设备拆除IRF操作流程。 1、关闭主框的业务口&#xff08;对设备的接口使用shutdown&#xff09;&#xff0c;关闭MAD检测口&#xff08;BFD/NQA/MAD&#xff09;&…
阅读更多...
强化学习（赵世钰版）-学习笔记（8.值函数方法）

强化学习（赵世钰版）-学习笔记（8.值函数方法）

本章是算法与方法的第四章&#xff0c;是TD算法的拓展&#xff0c;本质上是将状态值与行为值的表征方式&#xff0c;从离散的表格形式&#xff0c;拓展到了连续的函数形式。 表格形式的优点是直观&#xff0c;便于分析&#xff0c;缺点是数据量较大或者连续性状态或者行为空间时…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023