html+css+js原⽣项⽬--京东商城（有源码）
⼀、项⽬来源
慕课⽹—⼿把⼿从0打造电商⽹页开发
源码：右侧资料下载
⼆、摘要
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
效果1：代替：hover⿏标⼀移开副菜单就消失的效果，利⽤setTimeout添加延时效果，让⽤户有时间直接将⿏标挪到内容上
效果2：让防⽌主菜单上下滑动时，副菜单由于滑动过快抖动情况，可以只显⽰⿏标移⼊停⽌的地⽅
步骤说明：
新建menu类{
选出所有的元素组件并赋值给
<=document.querySelector()/querySelectorAll('li')
说明init（）⽅法 –> this.init();
}
构建init⽅法
init(
先所有的li利⽤foreach()添加for循环
内部添加监听事件，当⿏标移⼊时…（和选项卡⼀样，就是加⼊了定时器内容）
)
10.slider.js作⽤轮播图
效果1：点击下⼀个按钮，⾃动切换；
效果2：⼩点点颜⾊随图⽚切换⽽变⾊；
效果3：⾃动切换下⼀张原生js和js的区别
步骤说明：
选出所有属性需要值
init()初始化⽅法//下⾯初始化的⽅法都需要在init上运⾏⼀下？
initPoint(){}//动态⽣成li
1. ⾥⾯先定义num=li个数(ui的⼦节点)
2. 然后动态⽣成⼩圆点的DOM结构，它是⼀个dom⽚段，所以新⽣成⼀个dom⽚段
createDocumentFragment()，
3. for循环⾥循环num，
4. 循环⾥⾯新建ateElement('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！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。