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)**是否为删除按钮,是则删除留言