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

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

news 来源：原创 2025/5/14 21:45:54

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

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

商城首页实现步骤

1.准备工作

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

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栏切换板块

因为商品板块全都是映射得来的，所以在每次渲染完页面后都要重复进行部分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栏，数据筛选，等所有知识，我深刻的了解到了框架的重要性，如果只使用原生代码，会导致包括变量名冲突等一系列问题，接下来我将继续学习，会记录一些前端面试题，同时准备接下来的暑期实习。