js下 Day08、DOM案例

一．摇一摇

效果图:

功能思路分析:

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)**是否为删除按钮，是的话则完成删除功能

#二．滚动弹幕

效果图:

功能思路分析:

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()

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

效果图:

功能思路分析:

\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案例

一．摇一摇

#二．滚动弹幕

#三．今日小结

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

最新文章

热门文章