建立网站基本步骤拓者设计吧电脑版网页

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

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 timerlet num = 0function 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 soldStatusif (status === '售完') {soldStatus = 'out'} else if (status === '特价') {soldStatus = 'free'} else {soldStatus = ''}

完整实例代码

见所上传资料

完整项目心得

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