前端做歌词滚动效果

先做数据逻辑，再做界面逻辑，然后做事件

 

在css阶段先帮js准备好所有的过度或者需要的东西（transform挺常用，还有过度的transition）

界面了解功能可以，给js做准备可以，但是样式先不干，先搞功能

 

html音乐控件（这个controls是显示的关键 布尔属性）

<audio controls src="./assets/music.mp3"></audio>

 

是否选中（这个checlbox是选中的关键 布尔属性）

<input type="checkbox" checked />

 

！+ alt 能直接生成开头

 

<ul>有了之后在里面li*30>lorem可以生成30条乱数假文

还可以li*10>lorem4生成十条四个单词的乱数假文

margin：0可以去掉前面的黑点

 

list-style: none;去掉<ls>自带的点

 

这个可以对行盒和块盒居中text-algin：center

不影响div

 

文本上下居中

height: 30px;
line-height: 30px;

 

transform是影响很小的属性，不影响样式计算和布局，是从分块开始影响的

 transform: scale(1.2);用于​​对元素进行缩放变换​​，其核心作用是将元素沿 X 轴和 Y 轴同时放大或缩小

transform:translate(30px 20px);向右和向下偏移
transform:translateY(300px);向下偏移

 

 transition: 0.2s;/*用来过度的*/只针对数值类属性，比如0到100，0.2秒内完成

 

overflow: auto; /* 内容溢出时显示滚动条 */

 

 

 

注意英文冒号

 

如果一个文件里面是要处理的数据，是字符串，并且赋值给名叫lrc的变量

另一个js文件写转化后的数据

那只要html同时引入了这俩js文件，那这个负责转化的js就不用调用另一个js文件

直接可以用名字转化（不止一种转化方法）

var是变量声明符，是声明变量的关键字​

function parseLrc(){
var lines = lrc.split('\n');/*split函数表示用换行符把整个字符串分割成了多个字符串元素并存在一个数组里面（必须是字符串有的东西分割，比如lrc没有换行是一整串那就不能用换行分割），并赋值给lines变量*/
console.log(lines);
}

parseLrc();/*这个才是调用函数*/

 

开始写js的时候首先想到的是数据，有什么数据，怎么用这些数据，

先把数据格式化一下，变成自己好操作方便操作的样子，先别想着怎么变，

先自己在便签写上变数据后的样子，确定好数据要变成什么样子之后，再去js那里实际写代码改数据格式

（可以试试变成对象或数组或对象数组·）

 

第一步先打印出来原始数据长什么样

 

 

第二步先确定好要改成什么样的格式

 

第三步

在js文件自定义函数并在上面写文档注释

/**

* 解析歌词字符串

* 得到一个歌词对象的数组

* 每个歌词对象：

* { time：开始时间，words：歌词内容}

**/

function 函数名（）{

}

 

第四步

先把字符串数据转变为数组

 

 

 第五步

 把数组中每个字符串循环输出出来

 

 

第六步

如果得到的单个字符串还是不满足自己格式化数据的样子，那就继续针对字符串分割改变。

 

可以看出文字部分符合自己的格式化数据的样子

时间也能切出来

 

 方法二

 

 第七步

填充自己得到的不同数据于自定义对象内，并输出看看对不对

 

 方法一方法二差不多

 最后一步

 搞完数据，还是先不搞界面，先思考根据这个数据我还需要什么功能

 要高亮显示的歌词决定了歌词列表的偏移量

再另外提前写js函数dom用来拿需要的dom元素（可以防止程序代码多导致变量名冲突），而且这个是js控制前端的关键桥梁

// 这部分代码是 JavaScript 与 HTML 页面的「连接桥梁」​​，
// 它的核心作用是让 JavaScript 能够「找到」页面中的特定元素（比如音频播放器、歌词列表容器），
// 从而对这些元素进行操作（比如添加内容、修改样式、监听事件等）
// 获取需要的 dom
var doms = {
audio: document.querySelector('audio'),
ul: document.querySelector('.container ul'),
};

 

 添加歌词

 

不用率先改动代码

 

 歌词偏移

进度条

 

 

 

 尽量不要硬编码

 

length是计算数目的比如数组的元素数量 

 

数字字符串转数字，前面加上个+就行

只要出现算数运算符，后面的东西都会被转成数字

var parts = timeStr.split(':');

console.log(+parts[0]);

 

@param是参数注释 后面跟着的{String} 是参数类型