《爱你》歌词页面渲染

2022-06-10 21:31:12 阅读：161 来源： 互联网

标签：02 00 01 渲染歌词 lyric var timeStr 页面

<!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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

《爱你》歌词页面渲染