实战打造你的京东商城——HTML、CSS和JS项目学习指南

最编程 2024-08-05 20:32:56

...

一言君不定时上线

> > 顺气自然，戒焦戒燥

一、京东商城的项目实践

项目来源

www.bilibili.com/list/watchl…

项目流程

1、项目创建

架构好项目的结构，创建文件目录，分别是css+js+images+index.html；

2、引入css、js

在index.html文件里分别引入css、js，使用link标签；

3、获取icon

获取京东商城官网的icon图标，引入方法www.jd.com/favicon.ico 图片另存为；

4、写好注释

分析网页布局，分模块写代码，先写好必要的注释

例如，
<!-- 头部开始 -->
代码
<!-- 头部结束 -->

5、logo背景图

在设置logo背景图片时出现问题，块级元素的背景图片无法显示的原因是，图片路径是绝对路径时无效，相对路径成功，代码如下：

a {
    display: block;
    width: 100%;
    height: 100%;/* 容器大小为父元素大小 */
    background-image: url("../images/80afe4b365931a5d.jpg");
    background-size: cover;/*设置背景图铺满容器*/
    /*background是简写属性，属性值可以按需写入并任意顺序放置*/
}

6、搜索框

logo设置好了之后，就是搜索框，搜索框又由两部分组成，表单和搜索按钮；

border: none;/*或者border:0px;去掉表单边框*/
outline:none;/*去掉点击表单后的边框*/
border: 0px;/*去掉按钮边框*/

list-style:none;/*去掉列表旁圆点*/
text-decoration: none;/*去掉a标签下划线*/

7、搜索图标

引入搜索图标，图标来源：www.iconfont.cn/ 选中图标，加入购物车，下载代码，解压至项目css文件夹；然后使用，使用方法略

8、模糊查询

//实现模糊查询
let keyword = document.querySelector('.keyword');
let search_helper = document.querySelector('.search_helper');

//定义数组，存储搜索的内容
let searchArr = ['小米手机', '华为手机', '苹果手机', '小米电视', '小米平板', '苹果12', '苹果手表', '苹果13'];

//给输入框绑定内容改变事件
keyword.addEventListener('input', function () {
  search_helper.innerHTML = '';
  for (let i = 0; i < searchArr.length; i++) {

      //这里的判断就是查找数组元素是否有指定的用户输入的内容
      if (searchArr[i].indexOf(keyword.value) != -1) {
          search_helper.innerHTML += '<p>' + searchArr[i] + '</p>';
          search_helper.style.display = 'block';
      }
  }
})
//失去光标，搜索匹配到的内容消失
keyword.addEventListener('blur', function () {
  search_helper.style.display = 'none';
})

9、轮播图

//实现轮播图的切换
let img = document.querySelector('.img');
let prev = document.querySelector('.prev');
let next = document.querySelector('.next');
let slide = document.querySelector('.slide');
let lis = document.querySelectorAll('.banner_btn li');



let imgArr = ['1.webp', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'];

let count = 0;

//定义函数,切换图片的路径
function cutImg() {
  img.src = './images/' + imgArr[count];
  //将其他小圆点active样式全部去掉
  for (let i = 0; i < lis.length; i++) {
      lis[i].className = 'active';
  }
  //唯独被点击的小圆点亮起
  lis[count].className = 'active';
}
//设置定时器，每隔3秒自动切换图片
let timer = setInterval(function () {
  count++;
  if (count > imgArr.length - 1) {
      count = 0;
  }
  cutImg();
}, 4000)
//点击上一张切换图片
prev.addEventListener('click', function () {
  count--;
  if (count < 0) {
      count = imgArr.length - 1;
  }
  cutImg();
})
//点击下一张切换图片
next.addEventListener('click', function () {
  console.log(1111);
  count++;
  if (count > imgArr.length - 1) {
      count = 0;
  }
  cutImg();
})
//当鼠标放在图片，图片不切换
slide.addEventListener('mouseover', function () {
  clearInterval(timer);
})
//鼠标滑出图片，定时器重新跑，重新赋值
slide.addEventListener('mouseout', function () {
  timer = setInterval(function () {
      count++;
      if (count > imgArr.length - 1) {
          count = 0;
      }
      cutImg();
  }, 2000)
})
//给li绑定点击事件，点击li小圆点，跳转图片
for (let i = 0; i < lis.length; i++) {
  lis[i].addEventListener('click', function () {
      count = i;
      cutImg();
  })
}

10、楼层定位切换（页面小电梯）

//楼层定位切换
let header = document.querySelector('.header');
let banner = document.querySelector('.banner');
let elevator = document.querySelector('.elevator');
let items = document.querySelectorAll('.item');
let elevatorA = document.querySelectorAll('.elevator a');

//获取header的高度
let headerHeight = header.offsetHeight;
let bannerHeight = banner.offsetHeight;

//一个数组，放每个板块对应的截止高度
let elevatorArr = [];

//基础的高度，头部加上版心的高度
let base = headerHeight + bannerHeight;
for (let i = 0; i < items.length; i++) {
    base = base + items[i].offsetHeight + 30;
    elevatorArr.push(base);
}

function clearColor() {
    for (let i = 0; i < elevatorA.length; i++) {
        elevatorA[i].style.color = '';
    }
}

document.addEventListener('scroll', function () {
    //获取滚动条垂直方向滚了多少距离
    let top = document.documentElement.scrollTop || document.body.scrollTop;

    //当滚动距离大于头部和版心高度之和,将楼层的定位改为固定定位
    if (top > headerHeight + bannerHeight) {
        elevator.className = 'elevator elevator-fix';
    } else {
        elevator.className = 'elevator';
    }

    //实现楼层滚动，文字变色的效果
    if (top < headerHeight + bannerHeight) {
        clearColor();
    } else if (top >= headerHeight + bannerHeight && top < elevatorArr[0]) {
        clearColor();
        elevatorA[0].style.color = 'red';
    } else if (top >= elevatorArr[0] && top < elevatorArr[1]) {
        clearColor();
        elevatorA[1].style.color = 'red';
    } else if (top >= elevatorArr[1] && top < elevatorArr[2]) {
        clearColor();
        elevatorA[2].style.color = 'red';
    } else if (top >= elevatorArr[2]) {
        clearColor();
        elevatorA[3].style.color = 'red';
    }
})

11、头部吸顶效果

//当滚动距离大于头部和版心高度之和,将楼层的定位改为固定定位
    if (top > headerHeight + bannerHeight) {
        elevator.className = 'elevator elevator-fix';
        search.className = 'search  search-fix';
        searchM.style.height = '50px';
        form.style.top = '8px';
        search_logo.style.display = 'block';
    } else {
        elevator.className = 'elevator';
        search.className = 'search';
        searchM.style.height = '60px';
        form.style.top = '25px';
        search_logo.style.display = 'none';
    }

12、商品详情页布局

新增detail.html+detail.css+detail.js

13、实现详情页左边板块的前进和后退小图片效果

//实现上一张下一张小图片的切换
let prev = document.querySelector('.prev');
let next = document.querySelector('.next');
let ul = document.querySelector('.spec-items ul');

prev.addEventListener('click', function () {
    ul.style.left = '0';
    //说明一下图片路径，不能从这个js文件去找图片路径
    //而是应该从html文件出发找路径，因为最终背景图片的样式是应用到html
    prev.style.background = 'url(./images/disabled-prev.png)';
})

next.addEventListener('click', function () {
    ul.style.left = '-116px';
})

14、实现详情页左边板块的点击小图显示对应中图效果

//实现显示中图的效果
for (let i = 0; i < lis.length; i++) {
    lis[i].addEventListener('click', function () {
        for (let j = 0; j < lis.length; j++) {
            lis[j].className = '';
        }
        lis[i].className = 'img-hover';
        img.src = lis[i].children[0].src; //获取li里面的img的路径
        // img.src = imgs[i].src; //或者用这种方法

    })
}

15、实现图片放大镜效果

//实现放大镜
mainImg.addEventListener('mouseover', function () {
    zoomPup.style.display = 'block';
    zoomDiv.style.display = 'block';
})

mainImg.addEventListener('mouseleave', function () {
    zoomPup.style.display = 'none';
    zoomDiv.style.display = 'none';
})

mainImg.addEventListener('mousemove', function (e) {
    //获取鼠标距离文档顶部的距离
    let pageY = e.pageY;
    //获取鼠标距离文档左侧的距离
    let pageX = e.pageX;
    //获取中图距离文档顶部的距离
    let offsetTop = mainImg.offsetTop;
    //获取中图距离文档左侧的距离
    let offsetLeft = mainImg.offsetLeft;
    //获取放大镜（粉块）的高度的一半
    let h = zoomPup.clientHeight / 2;
    //获取放大镜（粉块）的宽度的一半
    let w = zoomPup.clientWidth / 2;
    //因为鼠标移动的时候，粉色方块也是跟着移动的，所以，鼠标指针处于块中心
    let top = pageY - offsetTop - h;
    let left = pageX - offsetLeft - w;

    if (top <= 0) {
        top = 0;
    } else if (mainImg.clientHeight - zoomPup.clientHeight) {
        top = mainImg.clientHeight - zoomPup.clientHeight;
    }

    if (left <= 0) {
        left = 0;
    } else if (left > mainImg.clientWidth - zoomPup.clientWidth) {
        left = mainImg.clientWidth - zoomPup.clientWidth;
    }

    zoomPup.style.top = top + 'px';
    zoomPup.style.left = left + 'px';

    //一个等比例公式，top/图片盒子高-粉色方块高=大图往上移出去的距离/大图原高-大图显示的图高
    let y = top / (mainImg.clientHeight - zoomPup.clientHeight);
    bigImg.style.top = -(y * (800 - 540)) + 'px';
    //水平方向的放大
    let x = left / (mainImg.clientWidth - zoomPup.clientWidth)
    bigImg.style.left = -(x * (800 - 540)) + 'px';

16、实现购物车数字计算效果

//实现购物车数字计算
reduce.addEventListener('click', function () {
    buyNum.value--;
    if (buyNum.value <= 1) {
        buyNum.value = 1;
        reduce.className = 'reduce disabled';
    }
})

add.addEventListener('click', function () {
    buyNum.value++;
    if (buyNum.value > 1) {
        reduce.classList.remove('disabled');
    }
})

17、我的源码链接

https://gitee.com/selling-the-earth/myItems.git

18、练后感

听懂比实现更重要，最好还是先听了，然后尝试自己写；
简单来说就是，带脑子，不盲目抄代码。认真的话其实可以一天完成，不过这个是在有一定基础下。
总之，不要畏惧去开始一件事。

二、查漏补缺

1、重温一下五种定位（position值）

① static 默认静态正常文档流

② relative 相对不脱离文档流只改变自身位置

③ absolute 绝对相对于最近仅为的父元素脱离文档流

④ fixed 固定相对于浏览器窗口脱离文档流

2、关于项目中用到的几个简写属性

background
box-shadow
transition
boder-radius
animation
client系列属性
scroll系列属性
offset系列属性

3、一些注意小点

1、写样式的时候，要小心选择器优先级问题,以及必要的时候使用z-index

2、写文档笔记的时候，目录结构很重要，最好简明清晰

3、写类名的时候可以使用-连接，写dom元素名的时候可以驼峰

上一篇：完美转移Git仓库，保全所有提交历史：实战教程

下一篇：深入理解 JavaScript 函数特性（第 4 部分）

实战打造你的京东商城——HTML、CSS和JS项目学习指南

一言君不定时上线

> > 顺气自然，戒焦戒燥

项目来源

项目流程

1、项目创建

2、引入css、js

3、获取icon

4、写好注释

5、logo背景图

6、搜索框

7、搜索图标

8、模糊查询

9、轮播图

10、楼层定位切换（页面小电梯）

11、头部吸顶效果

12、商品详情页布局

13、实现详情页左边板块的前进和后退小图片效果

14、实现详情页左边板块的点击小图显示对应中图效果

15、实现图片放大镜效果

16、实现购物车数字计算效果

17、我的源码链接

18、练后感

1、重温一下五种定位（position值）

2、关于项目中用到的几个简写属性

3、一些注意小点

实战打造你的京东商城——HTML、CSS和JS项目学习指南

用HTML、CSS和JS打造实战案例：动态样式下的登录注册界面（实例三）