一.摇一摇

效果图:

img

功能思路分析:

1. 功能一:页面切换

(1) 点击第一页的设置按钮,从第一页切换到第二页

(2) 点击第二页的返回按钮,从第二页切换到第一页

(3) 第二页的标题发生改变后,第一页的标题也跟着改变

2. 功能二:抽奖

(1) 点击”摇”时,从第二个页面拿到所有的内容进行随机抽奖,用**(setInterval())**显示抽奖过程

(2) 用**(setTimeout())**3秒后结束抽奖

3. 功能三:添加内容

(1) 点击加号按钮添加内容

(2) 1.创建节点( document.createElement() ) => 2.设置内容( innerHTML ) => 3.将创建的节点放在加号前面( 父元素.insertBefore() )

4. 功能四:删除内容

(1) 利用事件委托做删除功能,给大盒子绑定点击事件

(2) 判断**事件源(e.target.className)**是否为删除按钮,是的话则完成删除功能

#二.滚动弹幕

效果图:

img

功能思路分析:

1. 淡出隐藏

让第一个li的透明度**(opacity)为0**,过渡**(transition)时间500毫秒**

2. 向上滚动

(1) 当第一个动画效果完成后开始执行第二个动画效果,**(500 ** 毫秒之后执行setTimeout())。

(2) 让ul整体向上移动一个li的高度( marginTop ),过渡**(transition)时间500毫秒**

3. 无缝衔接

(1) 当以上两个动画效果完成后( 两次动画效果共用时1秒,1秒之后执行 )继续重复执行下一次滚动

(2) 将隐藏的li追加到ul的末尾(appendChild()),并显示( opacity = 1 )

(3) ul恢复初始位置,但需要清除过渡效果( 偷天换日,避免有向下滚动的bug )

(4) 无缝滚动重复执行,封装成函数反复调用

#三.今日小结

1.事件委托: 给大盒子绑定事件,判断事件源 e.target

2.类名添加删除: classList.add() classList.remove()

3.节点创建: document.createElement()

4.插入节点: 父元素.appendChild() 父元素.insertBefore()

5.定时器: setInterval() setTimeout()

#四.作业 -- 轮播留言板

效果图:

img

功能思路分析:

\1. 背景轮播

给body标签添加背景图,通过修改背景图的路径实现自动轮播

2. 显示弹框遮罩

点击添加按钮,显示遮罩和弹框,通过修改遮罩的display样式实现

\3. 隐藏弹框遮罩

点击弹框中取消按钮和XX按钮,隐藏遮罩

\4. 添加留言

(1) 点击弹框中提交按钮,发表留言

(2) 1.创建节点( document.createElement()) => 2.设置内容( innerHTML ) => 3.放入指定盒子( appendChild() )

\5. 删除留言

(1) 给留言区大盒子绑定点击事件,利用事件委托实现删除

(2) 判断**事件源(e.target.className)**是否为删除按钮,是则删除留言

js下 Day08、DOM案例的更多相关文章

  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. JS对象与Dom对象与jQuery对象之间的区别

    前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...

  5. js中的DOM操作汇总

    一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...

  6. js 字符串转dom 和dom 转字符串

    js 字符串转dom 和dom 转字符串 博客分类: JavaScript   前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createE ...

  7. NPM酷库:jsdom,纯JS实现的DOM

    NPM酷库,每天两分钟,了解一个流行NPM库. 昨天认识了一个在Node.js环境下操作HTML的库 cheerio,cheerio实现了jQuery接口,用起来十分方便.为什么不直接用jQuery呢 ...

  8. z-tree官方提供的下拉菜单案例

    1.z-tree官方提供的下拉菜单案例 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - selec ...

  9. 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM

    JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...

随机推荐

  1. Maven一定要会的这几个知识!

    一.Maven概念 Maven是一个项目管理和整合工具.Maven为开发者提供了一套完整的构建生命周期框架.开发团队几乎不用花多少时间就能够自动完成工程的基础构建配置,因为Maven使用了一个标准的目 ...

  2. 02python开发之基本运算符

    02 python开发之基本运算符 目录 02 python开发之基本运算符 2 基本运算符 2.1 算数运算符 2.1.1 种类 2.1.2 用法 2.2 比较运算符 2.2.1 种类 2.2.2 ...

  3. guitar pro系列教程(八):Guitar Pro编写使用的快捷符号

    上一节我们一起讨论了Guitar Pro的乐谱音乐符号的添加,在我们使用Guitar Pro写谱的时候,输入乐谱用鼠标点击是不是很麻烦而且又浪费时间呢,效果还不一定好,但是如果让我们结合键盘是不是就会 ...

  4. MGR(MySQL Group Replication)部署测试

    1. 环境说明 192.168.11.131 mgr1 主节点 192.168.11.132 mgr2 从节点 192.168.11.133 mgr3 从节点 2. 在mgr1.mgr2.mgr3上安 ...

  5. jQuery 第十章 工具方法-高级方法 $.ajax() $.Callbacks() .....

     $.ajax() $.Callbacks() $.Deferred() .then() $.when() ---------------------------------------------- ...

  6. python debug调试

    ------------恢复内容开始------------ 一.debug 1.step over f8(单步调试) 2.进入到下一个断点 3.运行到指定行 4.进入到对应的代码行,(和单步调试配合 ...

  7. Django踩坑记录1

    from django.db import models # Create your models here. class Event(models.Model): name = models.Cha ...

  8. 浅谈AsyncLocal,我们应该知道的那些事儿

    前言 最近查看有关框架源码,发现AsyncLocal这玩意水还挺深,于是花了一点功夫去研究,同时对比ThreadLocal说明二者区别以及在何时场景下使用AsyncLocal或ThreadLocal. ...

  9. Jmeter测试Websocket接口

    前言 websocket是什么? WebSocket 协议在2008年诞生,2011年成为国际标准.所有浏览器都已经支持了. 它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器 ...

  10. Spring Cloud 学习 (七) Spring Cloud Sleuth

    微服务架构是一个分布式架构,微服务系统按业务划分服务单元,一个微服务系统往往有很多个服务单元.由于服务单元数量众多,业务的复杂性较高,如果出现了错误和异常,很难去定位.主要体现在一个请求可能需要调用很 ...