js下 Day17、综合案例

一．面向对象轮播

效果图：

功能思路分析:

**1. ** 面向对象框架搭建

**2. ** 渲染数据

1.通过**map().join(‘’)**分别渲染导航和内容的数据

2.渲染时在导航菜单上挂载自定义属性保存下标

3.默认给第一个高亮( 添加类名 )

**3. ** 封装公用切换方法

1.先把上一项的类名去掉( classList.remove() )

2.修改下标

3.当前项类名加上( classList.add() )

4.内容盒子向上移动，修改marginTop = -400 * 当前下标

**4. ** 点击菜单切换

1.给菜单大盒子绑定点击事件，通过事件委托找到每一个标签

2.通过getAttribute()获取绑定在标签上的下标

3.调用切换方法传递下标

**5. ** 自动轮播

1.设置定时器，每隔指定时间调用

2.下标累加

3.调用切换方法传递下标

**6. ** 滑入显示滑出隐藏

1.给大盒子绑定鼠标滑过事件(mouseover)

2.鼠标滑过时清除定时器(clearInterval)

3.给大盒子绑定鼠标离开事件(mouseout)

4.鼠标滑过时清除定时器(clearInterval)

#二．进度条

效果图:

功能思路分析:

1. 设置进度条默认值

2. 渲染进度条

3. 渲染多个进度条

根据数据循环调用封装好的进度条

将数据中的信息传参

#三．今日小结

1.构造函数: constructor

2.原型对象: prototype

3.合并参数: Object.assign({},{},obj)

4.获取自定义属性: 元素.getAttribute()

5.鼠标滑过事件: mouseover

6.鼠标离开事件: mouseout

7.清除定时器: clearInterval()

#四. 作业 -- 进度条

效果图:

功能思路分析:

1. 倒计时功能

1.根据数据中的hourbuyTime中的activityTime起始时间和endTime结束时间完成倒计时功能

2.计算结束时间和起始时间的时间差，根据时间差求出年月日时分秒

2. 产品渲染功能

\1. 根据数据中的productList给定的产品数据，并通过**map().join()**来完成渲染

\2. 调用进度条方法(产品数据中的rebate值是进度条的值)来实现进度条功能

3. 进度条功能

\1. return拼接好的进度条的HTML结构

\2. 通过进度条的值，比例0.8转成百分比80%设置进度条的宽

4. 鼠标滑过产品的高亮效果通过纯CSS来实现