一.面向对象轮播

效果图:

img

功能思路分析:

**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来实现

js下 Day17、综合案例的更多相关文章

  1. JS 下拉菜单案例

    css代码 .nav { width: 300px; height: 400px; list-style: none; padding:; margin: 0 auto; } .nav>li { ...

  2. js下 Day12、案例

    一.垃圾分类 效果图: 功能思路分析: 1. 鼠标按下 (1) 获取鼠标到元素的距离(e.offsetX) (2) 开启开关变量 (3) 获取事件源 (4) 记录垃圾初始位置 ​  2. 鼠标移动 ( ...

  3. js下 Day11、案例

    一.成绩分类 效果图: 功能思路分析: 1. 渲染数据 2. 鼠标按下开启拖拽 \1. 给成绩盒子绑定鼠标按下事件(mousedown),用事件委托做多个标签的拖拽 \2. 开启控制拖拽的变量 \3. ...

  4. Ext.js入门:常用组件与综合案例(七)

    一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交   datefield简单示例: <html xmlns=&quo ...

  5. js上 二十、综合案例

    二十.综合案例 题目一: **1. ** 数组随机 描述,写randomArray函数,传递一个数组,传递一个数值,返回一个指定个数的随机的新数组,不允许有重复数据 用例: randomArray([ ...

  6. js上 十九、综合案例

    十九.综合案例 题目一: 封装一个函数equal(a1,a2),传入两个一维数组,判断两个数组是否包含相同的元素,如果相等,函数的返回值为true, 不相等,函数的返回值为false 1)例:arr1 ...

  7. JavaScript:综合案例-表单验证

    综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...

  8. 黑马eesy_15 Vue:04.综合案例(前端Vue实现)

    黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...

  9. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

随机推荐

  1. html页面转PDF、图片操作记录

    前言 日常开发中,我们有可能会碰到从系统中导出数据并打印的需要,打印的格式是常规的表格形式,例如: 本文记录使用js库html2canvas + jspdf实现html转PDF.图片,并下载 画出页面 ...

  2. 都0202了,还在问Vegas和Pr哪个好?

    自媒体时代,蕴藏着很多机会.许多平凡的人,通过制作视频,收获了掌声.赢得了粉丝,甚至改变了自己的命运. 图1:B站百大UP主颁奖现场   但这条路真的一路畅通吗?其实不然,他们成功的背后,必定有多方面 ...

  3. Java —— for while do...while循环(1)

    //for循环 for(初始化语句 ;循环条件; 迭代语句){ 循环体; } //while循环 初始化语句; while(循环条件){ 循环体; 迭代语句; } //do...while循环 初始化 ...

  4. C语言讲义——链表完整代码

    #include <stdio.h> #include <stdlib.h> #include <string.h> struct Node { int _id; ...

  5. mq存储文件

    存储文件 启动broker之后我们可以看到下面这些文件 1.config包含了运行期间一些配置信息,主要包括下列信息. consumerFilter.json:主体消息过滤信息 consumerOff ...

  6. mqProducer

    producer核心属性:生产者所属组,消息服务器在回查事物状态时会随机选择该组中任何一个生产者发起事务回查请求. createTopicKey:默认topicKey defaultTopicQueu ...

  7. [Docker]Docker与Linux ip_forward数据包转发

    背景 今天在一台新虚拟机上需要临时启动一个consul服务,安装Docker后使用docker启动,但是在执行启动命令后发现docker有一个警告: WARNING: IPv4 forwarding ...

  8. ResHacker 用命令行方式修改 windows PE文件版本号

    由于工作需要在詹金斯(genkins)集成环境打包,打包避免不了需要修改版本号,写入版本号最简单的方式通过修改windows rc文件 这就意味着,每次构建新版本前需要修改一次源文件 这个在用詹金斯集 ...

  9. Django 的JsonResponse 与json

    json

  10. 【2020.12.02提高组模拟】球员(player)

    题目 题目描述 老师们已经知道学生喜欢睡觉,Soaring是这项记录保持者.他只会在吃饭或玩FIFA20时才会醒来.因此,他经常做关于足球的梦,在他最近的一次梦中,他发现自己成了皇家马德里足球俱乐部的 ...