《爱你》歌词页面渲染
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
list-style: none;
background-color: pink;
}
</style>
</head>
<body>
<ul></ul>
<script>
//歌词数组
var lyricArr=[]
//时间数组
var timeArr=[]
//数组及相关的赋值
function splitLryic(){
var lri={"sgc":false,"sfy":false,"qfy":false,"lrc":{"version":21,"lyric":"[00:00.000] 作词 : 陈思宇/谈晓珍/潘瑛\n[00:00.746] 作曲 : Lee Yong Min/Hwang Se Joon\n[00:01.492]Rap词：MC HAN韩勇\n[00:10.985]RAP：\n[00:11.705]Ya boy MC HAN\n[00:14.454]我弹的钢琴都是为了你弹\n[00:16.577]弹了那么久还是觉得浪漫\n[00:19.434]我弹的时候能听到你在唱\n[00:21.412]感觉上你在这\n[00:22.580]跟我一起说话\n[00:23.964]一天到晚 我不停地想\n[00:26.197]You’re all that I think of\n[00:27.826]You’re all that I want\n[00:28.929]跟你一起总是让我特别开心\n[00:31.190]不论发生什么事我永远爱你\n[00:33.716]如果你突然打了个喷嚏 那一定就是我在想你\n[00:38.058]如果半夜被手机吵醒 啊那是因为我关心\n[00:42.620]常常想你说的话是不是别有用心\n[00:47.463]明明很想相信 却又忍不住怀疑\n[00:52.558]在你的心里 我是否就是唯一 爱就是有我常烦着你\n[01:01.420]Ho Baby 情话多说一点 想我就多看一眼\n[01:07.028]表现多一点点 让我能 真的看见\n[01:11.363]Oh Bye 少说一点 想陪你不只一天\n[01:16.430]多一点 让我 心甘情愿 爱你\n[01:35.835]喜欢在你的臂弯里胡闹 你的世界是一座城堡\n[01:40.409]在大头贴画满心号 贴在手机上对你微笑\n[01:45.169]常常想我说的话你是否听得进去\n[01:50.040]明明很想生气 却又止不住笑意\n[01:54.734]Oh Oh 在我的心里 你真的就是唯一 爱就是有我常赖着你\n[02:03.785]Ho Baby 情话多说一点 想我就多看一眼\n[02:09.130]表现多一点点 让我能 真的看见\n[02:14.255]Oh Bye 少说一点 想陪你不只一天\n[02:18.766]多一点 让我 心甘情愿 爱你\n[02:23.603]就这样 一天多一点 慢慢地累积感觉\n[02:28.811]两人的世界 就能够贴近一点\n[02:37.339]Ho Baby 情话多说一点 想我就多看一眼\n[02:42.969]表现多一点点 让我能 真的看见\n[02:47.728]Oh Bye 少说一点 想陪你不只一天\n[02:52.449]多一点 让我 心甘情愿 爱你\n[02:57.118]Ho Baby 情话多说一点 想我就多看一眼\n[03:02.191]表现多一点点 让我能 真的看见\n[03:06.923]Oh Bye 少说一点 想陪你不只一天\n[03:11.429]多一点 让我 心甘情愿 爱你\n[03:16.584]多一点 才会慢慢发现 因为你 让我心甘情愿\n[03:26.227]（OT：Nae Yae Gil Eo Bwa）\n"},"tlyric":{"version":0,"lyric":""},"code":200}
//得到歌词对象，字符串
var lyric=lri.lrc.lyric
//字符串分割，支持正则，得到对应的字符串数组、
var lyricStrArray=lyric.split(/\n/)
//遍历对应的字符串数组
//删除最后一个元素
lyricStrArray.pop()
lyricStrArray.forEach(function(v){
//对每一行的字符串进行拆分，一个歌词数组，一个时间数组
var pattern=/\[\d{2}\:\d{2}\.\d{3}]/
//得到时间字符串
var timeStr=v.match(pattern)[0]
//将里面的中括号取出
timeStr=timeStr.replace(/\[,""/)
timeStr=timeStr.replace(/\],""/)
//歌词的字符串
var lyricStr=v.replace(pattern,"")
//将歌词加到对应的数组
lyricArr.push(lyricStr)
var times=timeStr.split(/\:/)
timeArr.push(parseInt(times[0])*60+Number(times[1]))
})
//渲染操作
lyricArr.forEach(function(lyric){
document.querySelector("ul").innerHTML+=`<li>${lyric}</li>`
})
}
splitLryic()
</script>
</body>
</html>
标签：02,00,01,渲染,歌词,lyric,var,timeStr,页面 来源： https://www.cnblogs.com/kakaya/p/16364724.html