html+css+js原生项目--京东商城（有源码）

一、项目来源

慕课网—手把手从0打造电商网页开发

网址：https://www.imooc.com/learn/1236

源码：右侧资料下载

二、摘要

1.基本框架搭建(三、1-3)

2.实现html+css效果，一些要点笔记(三、4-8)

3.js效果步骤分析（三、9-10）

4.做完感受(四)

三、开始构建

1.先搭建基本页面结构，并用link连接到首页

2.搭建页面骨骼

页面分为三大块，导航，首部和内容

<container> ：body下最大单位，包裹所有内容

• 导航 .nav
  • .nav-box：大小、背景颜色
• 首部.header：
  • .head-box:大小，居中对齐，弹性布局，内边距
  • 三大块内容，两侧两块广告图片+中间的内容
  • 中间：最大块：宽、内边距

    下级大块：内边距和弹性布局

• 内容.warpper

3.dl dt dd:类似表格样式

<dl>

<dt>xxx

<dd>yyy</dd>

<dd>yyy</dd>

…

</dt>

<dt>…</dt>

<dl>

效果

4.flex-shrink:0；如果一个元素的属性是0则不压缩（弹性布局后面多的将前面移位，使用后后面自动折行，不会压迫前面的内容）

• 解决下图问题:弹性布局后面多的将前面移位

• 使用后

  

5.css布局中的注意点

• 为了兼容性 button按钮要加type="button"
• 
• reset.css：初始化样式，重置样式

  原因：不同的浏览器的页面初始化设置都不同，需要我们手动重置，达到统一

• 居中显示技巧：margin:0px auto;
• <img src="" alt="">alt 属性：是一个必需的属性，它规定在图像无法显示时的替代文本
• 设为 Flex 布局（默认从左到右依次排列）以后，子元素的float、clear和vertical-align属性将失效。

6. array(xxx).forEach（）方法

用于调用数组的每个元素，并将元素传递给回调函数。=给它一个循环

array.forEach(function(currentValue, index, arr), thisValue)

7.setInterval和setTimerout的区别

    setInterval:每隔多长时间调用（间歇调用）

setTimerout：指定多长时间后调用（超时调用）

8. this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的

event.target不会变化，它永远是直接接受事件的目标DOM元素；

.this和event.target都是dom对象

li.children[1]:li的第二个子属性是sub-menu

9.menu.js作用说明：

• 效果1：代替：hover鼠标一移开副菜单就消失的效果，利用setTimeout添加延时效果，让用户有时间直接将鼠标挪到内容上
• 效果2：让防止主菜单上下滑动时，副菜单由于滑动过快抖动情况，可以只显示鼠标移入停止的地方

步骤说明：

• 新建menu类{
  • 选出所有的元素组件并赋值给this.xxx

  this.xxx=document.querySelector()/querySelectorAll('li')

  • 说明init（）方法 –> this.init();

  }

• 构建init方法

  init(

  • 先所有的li利用foreach()添加for循环
  • 内部添加监听事件，当鼠标移入时…（和选项卡一样，就是加入了定时器内容）

  )

10.slider.js作用轮播图

效果1：点击下一个按钮，自动切换；

效果2：小点点颜色随图片切换而变色；

效果3：自动切换下一张

步骤说明：

• 选出所有属性需要值
• init()初始化方法//下面初始化的方法都需要在init上运行一下？
• initPoint(){}//动态生成li

1. 里面先定义num=li个数(ui的子节点)
2. 然后动态生成小圆点的DOM结构，它是一个dom片段，所以新生成一个dom片段    createDocumentFragment()，
3. for循环里循环num，
4. 循环里面新建li(document.createElement('li')),
5. 然后for循环外，appendChild(li) 到frg里面，frg再添加到ul中

   问题：为什么不是ul里面呢？然后在给ul里面添加frg？？？

   解答：文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。

6. 为li设置宽度
7. 为li添加点击监听全局设置this.index=1;在监听内让this.index=索引值（前面设置的自定义属性）

• copyPic(){}://扩展ul图片，重新设置图片队列，方便轮播

1. 克隆第一张图片和最后一张图片（新知识点）

   this.picBox.firstElementChild.cloneNode(true);

2. 队首添加第五张照片（appendChild），队末添加第一张(insertBefore)， 至此，图片队伍顺序变成 5,1,2,3,4,5,1
3. 重新设置ul的宽=可视区的宽*图片的个数
4. ul的left=-1*可视区宽（让第一张显示。而不是第五张）

• leftRight (){}://左右按钮控制轮播

1. 分别获取左右按钮，添加点击监听事件
2. 事件内利用move(){}方法移动图片

• move(){}://移动

1. 运行animate（）方法
2. for循环里面让所有小点的className为空
3. for循环外让当前点击的小点点为active

• animate（offset(位移)）//放慢移动效果

1. 定义常量,time=1000(运动时间),rate=100（100/s）
2. 定义变量speed,speed=位移/次数
3. 定义变量goal=ul的左位置-offset位移（表示移动多远的距离）
4. 设置定时器timer,每0.1s动一次。里面if判断,物体是否已经到达目标值（goal）。
5. 如果达到或马上要达到（这里很复杂），则让物体的left=goal、清除定时器、让animate效果为false；如果没有，又分为三种情况

   

• play(){}//自动播放

1. 设置this.auto定时器，每隔2s点击一下右键
2. 为整个轮播图添加监听事件，当鼠标移入时，清理掉定时器
3. 当鼠标移出时，继续重复刚刚的定时器

11.js里的注意点：

• createDocumentFragment() 方法可以更安全改变文档的结构及节点。
• e.target获取当前的dom节点（作用类似与this）
• 添加索引值属性 代码：

效果：

• 轮播图实现原理：

（以前学的是整个复制一遍，这个只添加首尾部分，更简洁）

三、感想

我觉得这个课css+html部分讲的挺好的，由其是分类那边老师辛苦把网站分类的一大串文字全部自己都做好了，让网站效果能更逼真

menu.js菜单细节那里效果也很好，讲的很明白

但是轮播图的一些元素的表达太复杂了，我又反复听了几遍才听懂了意思，但是很多地方还是可以优化的，总觉得轮播图没有这么复杂，我还是结合以前学的改改这个代码吧，正好复习一下之前的内容。

能做完一个项目还是很开心很有成就感的，fighting！