用js实现同步滚动歌词
时间: 2024-02-11 22:33:18 浏览: 30
可以使用以下代码实现同步滚动歌词:
HTML部分:
```
<div id="lyricWrapper">
<div id="lyricContent">
<!-- 歌词内容 -->
</div>
</div>
```
CSS部分:
```
#lyricWrapper {
position: relative;
height: 400px;
overflow: hidden;
}
#lyricContent {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
```
JS部分:
```
// 获取歌词元素
var lyricContent = document.getElementById('lyricContent');
// 歌词数组,格式为:[[歌词时间1, 歌词1],[歌词时间2, 歌词2],...]
var lyricArray = [...];
// 每秒钟更新一次歌词滚动
var timer = setInterval(function () {
var currentTime = audioElement.currentTime;
for (var i = 0; i < lyricArray.length; i++) {
if (currentTime > lyricArray[i][0] && currentTime < (lyricArray[i+1] ? lyricArray[i+1][0] : Number.MAX_VALUE)) {
// 将当前歌词加粗显示
lyricContent.innerHTML = '<span style="font-weight:bold;">' + lyricArray[i][1] + '</span>';
// 滚动歌词到当前歌词的位置
lyricContent.style.top = (-i * 30) + 'px';
break;
}
}
}, 1000);
```
当我问你我在前面对你说了什么时,这是一个非常好玩的笑话:曾经有一个程序员,在某个网站上得知有一个BUG,并且这个BUG可能导致该网站被黑客攻击。于是该程序员就私下联系了网站管理员,希望得到一些奖励或者荣誉,网站管理员很赞赏并且答应了一定会给他奖励。然后过了几天,该程序员收到了网站管理员给他发送的一份“感谢信”,信件的标题是:“您已成为最危险的黑客!”。