花下醉（解说）
全屏、音乐控制均未使用插件，便于大家观察、学习。解释一下JS代码：
83行：两个变量，fs 是 全屏依赖变量，布尔类型（true 或 false）；timeId 是定时器依赖变量，setTimeout 定时器清除和启用句柄，控制全屏相关的按钮显示/隐藏的依托。
84行：声明wyy音乐id数组；
85行：自定义函数，音乐控制器的关键帧动画控制预设；
86行 - 89行：自定义函数，播放音乐，随机播放。几个地方会用到它，一是页面打开时（103行），二是一支曲子播放完毕时（94行），三是点击小醉鬼时（95行）；
90行：声明音频播放控制器句柄，这是三个“按钮”，所以放入集合变量中；
91行：“按钮”集合点击事件。btns 变量属对象变量，将之变成可操作的数组，所以使用扩展运算符 ... 将其变为数组对象，即 [...btns] ，这样就可以用 forEach 方法对数组元素（按钮）进行操作；
92行 - 94行：audio 控件监听事件，各行分别监听 audio 控件的 play（播放）、pause（暂停）和 ended（播放结束）三个事件，前两个事件运行 85 行的 mState() 函数，即驱动播放控制器的状态，后一个事件运行 86 行开始的函数 playNext() 即播放音乐函数；
95行：监听小醉鬼点击事件，运行的是 playNext() 函数。任何时候都可以点击它更换音乐；
96行：监听全屏按钮点击事件，依据 fs 变量值驱动全屏/窗口模式切换；
97行：监听 document 的 fullscreen 事件，即监听文档的全屏事件，若文档有元素处于全屏状态，则令 fs 变量为真，且设置按钮文本为“退出全屏”，反之，若没有元素处于全屏状态，则令 fs 变量为假，且设置按钮文本为“全屏观赏”；
98行 - 102行：监听帖子父元素 papa 的鼠标指针滑过事件，这里要干的事情是，一是清除定时器记录以便重新计时（99行），二是令全屏按钮现身（100行），三是启动定时器（101行），定时器所做的事情是3秒后令全屏按钮消失。这部分，呈现在web中的效果是，鼠标在帖子区域一旦移动，全屏按钮就会华丽现身，如果鼠标指针静止，3秒钟后按钮消失。
103行：运行一次 playNext() 函数，令页面打开时随机播放四支曲子中的一支。
评分
83行：两个变量，fs 是 全屏依赖变量，布尔类型（true 或 false）；timeId 是定时器依赖变量，setTimeout 定时器清除和启用句柄，控制全屏相关的按钮显示/隐藏的依托。
84行：声明wyy音乐id数组；
85行：自定义函数，音乐控制器的关键帧动画控制预设；
86行 - 89行：自定义函数，播放音乐，随机播放。几个地方会用到它，一是页面打开时（103行），二是一支曲子播放完毕时（94行），三是点击小醉鬼时（95行）；
90行：声明音频播放控制器句柄，这是三个“按钮”，所以放入集合变量中；
91行：“按钮”集合点击事件。btns 变量属对象变量，将之变成可操作的数组，所以使用扩展运算符 ... 将其变为数组对象，即 [...btns] ，这样就可以用 forEach 方法对数组元素（按钮）进行操作；
92行 - 94行：audio 控件监听事件，各行分别监听 audio 控件的 play（播放）、pause（暂停）和 ended（播放结束）三个事件，前两个事件运行 85 行的 mState() 函数，即驱动播放控制器的状态，后一个事件运行 86 行开始的函数 playNext() 即播放音乐函数；
95行：监听小醉鬼点击事件，运行的是 playNext() 函数。任何时候都可以点击它更换音乐；
96行：监听全屏按钮点击事件，依据 fs 变量值驱动全屏/窗口模式切换；
97行：监听 document 的 fullscreen 事件，即监听文档的全屏事件，若文档有元素处于全屏状态，则令 fs 变量为真，且设置按钮文本为“退出全屏”，反之，若没有元素处于全屏状态，则令 fs 变量为假，且设置按钮文本为“全屏观赏”；
98行 - 102行：监听帖子父元素 papa 的鼠标指针滑过事件，这里要干的事情是，一是清除定时器记录以便重新计时（99行），二是令全屏按钮现身（100行），三是启动定时器（101行），定时器所做的事情是3秒后令全屏按钮消失。这部分，呈现在web中的效果是，鼠标在帖子区域一旦移动，全屏按钮就会华丽现身，如果鼠标指针静止，3秒钟后按钮消失。
103行：运行一次 playNext() 函数，令页面打开时随机播放四支曲子中的一支。
评分
发表评论:
评论列表 [0条]
