歌词滚动效果

歌词滚动实现思路 歌词滚动的核心主要在 js 部分，整个滚动的过程实际上就是在一个我们人为固定的div中，不断移动ul的位置，并在需要的位置设置高亮，从而实现歌词滚动 但在进行 js 操作之前，由于我们拿到的歌词数据是个字符串，而字符串及其难以操作，因此我们在 js 代码中的第一步就应该是对字符串进行处理，将其中每一句歌词处理成一个包含时间(time)、文字(words)的对象，并将所有的歌词对象放置在一个数组中，以便于后续操作，这是及其重要的准备操作！！！ 书写根据歌词播放时间找到对应需要高亮歌词的函数 实现思路：根据播放器当前时间(currentTime)计算与之应显示的歌词的下标并返回 算法：通过播放器当前时间与含有歌词对象的数组中的每一个对象的时间进行比较，如果当前时间小于其中index下标的对象的时间，则当前显示的歌词下标就应该是index - 1 歌词高亮我们可以通过 js 操作需要高亮的DOM元素，通过为其添加指定属性(active)来实现高亮，注意，需要事先在CSS中设置好带有active属性的li的高亮样式，并且设置高亮之前应该先取消上一次为li设置的active属性 通过 ul的DOM对象.querySelector('active') 找到ul中含有active属性的li 再通过 li.classList.remove('active')删除active属性 最后监听播放器(audio)的时间变化，并为其绑定设置偏移量的回调函数即可实现歌词滚动 播放器DOM对象 audio.addEventListener('timeupdate', () => { setOffset() }) 实现步骤

书写HTML结构

放置播放器(audio) 通过乱数假文模拟歌词，方便书写样式命令格式：通过 li*30>lorem3 便可生成30个li，每个li里有3个乱数假文

书写CSS基本样式

实现歌词播放界面基本样式

编写JS代码

解析歌词数据 寻找高亮歌词下标的函数 根据拿到的歌词数据，循环创建li元素并将歌词添加到li中 li.textContent = 每句歌词 书写设置偏移量的函数 为播放器(audio)绑定timeupdate属性变化的监听事件 总结 在实现一个效果的时候，应该先写与效果有关的功能，每个功能都测试完没问题后，再去写界面，最后再写交互，这样书写的代码可读性更强，维护性更高，而且在开发过程中更不容易出错