马黑黑 发表于 2022-6-5 18:11

《愿》改进后的代码——歌词显示板毛玻璃效果

HTML代码结构中，歌词显示板加入一个div，负责外观表现，即毛玻璃效果，同时能令内里的歌词显示板仅专注于规范尺寸从而更容易控制：

<style>
/* 界面及音乐控制 */
.mama { left: -202px; width: 1000px; height: 664px; background: #eee url('https://638183.freep.cn/638183/Pic/2022/9.jpg') no-repeat; position: relative; }
.meter { position: absolute; left: 50%; bottom: 215px; transform: rotate(-90deg); cursor: pointer; }
/* 歌词同步 */
#lrcDiv_outer { position: absolute; width: fit-content; height: fit-content;padding: 10px 14px; right: 10px; bottom: 160px; background: transparent linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.45)); }
#lrcDiv_inner { width: 340px; height: 72px; padding: 0px; overflow: hidden; }
#lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
#lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: lightseagreen; text-shadow: 1px 1px 1px #333; list-style-type: none; }
</style>

<div class="mama">
        <div id="lrcDiv_outer">
                <div id="lrcDiv_inner"><ul id="lrcUl"></ul></div>
        </div>
        <meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=30569502.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
//元素句柄
let aud = document.querySelector('.aud'),
        meter = document.querySelector('.meter'),
        lrcUl = document.getElementById('lrcUl');
//lrc歌词
let lrcAr=[
['0:02','歌名 : 愿'],
['0: 05','歌手 : 崔子格'],
['0:28','所属专辑 : 热门华语260'],
['0: 31','身如箭，血如焰，轮回一念。'],
['0:37','心无垢，思无邪，身陨谁怜。'],
['0:42','眉间一点朱砂艳，'],
['0: 47','灯花不负相见。'],
['0:53','红线连，素手牵，茫茫无言。'],
['0:58','梦几时，忆几时，天命难变。'],
['1:04','执伞并行前路远，'],
['1:09','莫忘旧日诺言。'],
['1:15','几世孤寂几重魂梦几度流年，'],
['1:21','终不过生死人间。'],
['1:27','谁的追寻远在天边，'],
['1:35','谁的约定犹在眼前，'],
['1:42','谁曾为你许下救赎誓言，'],
['1:49','谁的身躯化为云烟。'],
['2:10','谁的追寻远在天边，'],
['2:17','谁的约定犹在眼前，'],
['2:24','谁曾为你许下救赎誓言，'],
['2:31','谁的身躯化为云烟。'],
['2:38','待到行至天边，日落惊弦，'],
['2:45','惟愿以身为箭，在日光下长眠。'],
['3:00','--End--']
];
//lrc时间信息转为秒
let toSec = (lrcTime) => {
        let tmpAr = lrcTime.split(':');
        lrcTime = tmpAr * 60 + parseInt(tmpAr);
        return lrcTime;
}
//处理lrc歌词数组：时间转换成秒、歌词放入li标签
for(j=0; j<lrcAr.length; j++){
        lrcAr = toSec(lrcAr);
        lrcUl.innerHTML += '<li id="li' + lrcAr + '">' + lrcAr + '</li>';
}
aud.addEventListener('timeupdate', () => {
        let prog = 100 * aud.currentTime / aud.duration;
        meter.value = prog;
        //歌词同步
        let tt = aud.currentTime;
        for(j=0; j<lrcAr.length; j++){
                if(tt > lrcAr){
                        if(j > 0){
                                let idxLast = lrcAr;
                                document.getElementById('li' + idxLast).style.color = 'lightseagreen';
                                lrcUl.style.top ='-' + (j * 24 - 24) + 'px'; //乘减依据: li高度
                        }
                        let idx = lrcAr;
                        document.getElementById('li' + idx).style.color = 'lightgreen';
                }
        }
})
// 播放结束重置歌词样式
aud.addEventListener('ended', () => {
        document.getElementById("li" + lrcAr).style.color = 'lightseagreen';
        lrcUl.style.top = 0;
})
//音乐控制
meter.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2022-6-5 18:16

#lrcDiv_inner 高度的计算： 3行 * li的高度。例中是 72，就是 3*24 得来的；

JS中，这句，

lrcUl.style.top = '-' + (j * 24 - 24) + 'px'; //乘减依据: li高度

24 这个数字的得来，也是依据 #lrcUl li 的 height 值。

ul, ul li 标签的行为比较野，所以都设定它们 的 margin、padding 为 0，这是必须的，否则以上的计算思路不成立。

马黑黑 发表于 2022-6-5 18:16

<style>
/* 界面及音乐控制 */
.mama { left: -202px; width: 1000px; height: 664px; background: #eee url('https://638183.freep.cn/638183/Pic/2022/9.jpg') no-repeat; position: relative; }
.meter { position: absolute; left: 50%; bottom: 215px; transform: rotate(-90deg); cursor: pointer; }
/* 歌词同步 */
#lrcDiv_outer { position: absolute; width: fit-content; height: fit-content;padding: 10px 14px; right: 10px; bottom: 160px; background: transparent linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.45)); }
#lrcDiv_inner { width: 340px; height: 72px; padding: 0px; overflow: hidden; }
#lrcUl { position: relative; top: 0; margin: 0; padding: 0; }
#lrcUl li { margin: 0; padding: 0; height: 24px; font: normal 18px / 24px sans-serif; color: lightseagreen; text-shadow: 1px 1px 1px #333; list-style-type: none; }
</style>

<div class="mama">
        <div id="lrcDiv_outer">
                <div id="lrcDiv_inner"><ul id="lrcUl"></ul></div>
        </div>
        <meter class="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
</div>
<audio class="aud" src="https://music.163.com/song/media/outer/url?id=30569502.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
//元素句柄
let aud = document.querySelector('.aud'),
        meter = document.querySelector('.meter'),
        lrcUl = document.getElementById('lrcUl');
//lrc歌词
let lrcAr=[
['0:02','歌名 : 愿'],
['0: 05','歌手 : 崔子格'],
['0:28','所属专辑 : 热门华语260'],
['0: 31','身如箭，血如焰，轮回一念。'],
['0:37','心无垢，思无邪，身陨谁怜。'],
['0:42','眉间一点朱砂艳，'],
['0: 47','灯花不负相见。'],
['0:53','红线连，素手牵，茫茫无言。'],
['0:58','梦几时，忆几时，天命难变。'],
['1:04','执伞并行前路远，'],
['1:09','莫忘旧日诺言。'],
['1:15','几世孤寂几重魂梦几度流年，'],
['1:21','终不过生死人间。'],
['1:27','谁的追寻远在天边，'],
['1:35','谁的约定犹在眼前，'],
['1:42','谁曾为你许下救赎誓言，'],
['1:49','谁的身躯化为云烟。'],
['2:10','谁的追寻远在天边，'],
['2:17','谁的约定犹在眼前，'],
['2:24','谁曾为你许下救赎誓言，'],
['2:31','谁的身躯化为云烟。'],
['2:38','待到行至天边，日落惊弦，'],
['2:45','惟愿以身为箭，在日光下长眠。'],
['3:00','--End--']
];
//lrc时间信息转为秒
let toSec = (lrcTime) => {
        let tmpAr = lrcTime.split(':');
        lrcTime = tmpAr * 60 + parseInt(tmpAr);
        return lrcTime;
}
//处理lrc歌词数组：时间转换成秒、歌词放入li标签
for(j=0; j<lrcAr.length; j++){
        lrcAr = toSec(lrcAr);
        lrcUl.innerHTML += '<li id="li' + lrcAr + '">' + lrcAr + '</li>';
}
aud.addEventListener('timeupdate', () => {
        let prog = 100 * aud.currentTime / aud.duration;
        meter.value = prog;
        //歌词同步
        let tt = aud.currentTime;
        for(j=0; j<lrcAr.length; j++){
                if(tt > lrcAr){
                        if(j > 0){
                                let idxLast = lrcAr;
                                document.getElementById('li' + idxLast).style.color = 'lightseagreen';
                                lrcUl.style.top ='-' + (j * 24 - 24) + 'px'; //乘减依据: li高度
                        }
                        let idx = lrcAr;
                        document.getElementById('li' + idx).style.color = 'lightgreen';
                }
        }
})
// 播放结束重置歌词样式
aud.addEventListener('ended', () => {
        document.getElementById("li" + lrcAr).style.color = 'lightseagreen';
        lrcUl.style.top = 0;
})
//音乐控制
meter.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2022-6-5 20:32

这个好，操控起来更加方便了{:4_187:}

马黑黑 发表于 2022-6-5 20:34

红影 发表于 2022-6-5 20:32
这个好，操控起来更加方便了
整理了一下，优化了一点点

红影 发表于 2022-6-5 20:39

马黑黑 发表于 2022-6-5 20:34
整理了一下，优化了一点点

怎样让歌词在这个毛玻璃上居中呢？

马黑黑 发表于 2022-6-5 20:41

红影 发表于 2022-6-5 20:39
怎样让歌词在这个毛玻璃上居中呢？

居中简单的，在 #lrcUl li 选择器那里加 text-align: center吧

红影 发表于 2022-6-5 20:43

马黑黑 发表于 2022-6-5 20:41
居中简单的，在 #lrcUl li 选择器那里加 text-align: center吧

我试试。。。

红影 发表于 2022-6-5 20:45

马黑黑 发表于 2022-6-5 20:41
居中简单的，在 #lrcUl li 选择器那里加 text-align: center吧

嗯嗯，的确。谢谢黑黑，知道了{:4_187:}

马黑黑 发表于 2022-6-5 20:46

红影 发表于 2022-6-5 20:45
嗯嗯，的确。谢谢黑黑，知道了

li以行内块状级出现，所以需要在它那里设置文本居中

红影 发表于 2022-6-5 20:46

width: fit-content 这个是什么？

马黑黑 发表于 2022-6-5 20:47

红影 发表于 2022-6-5 20:46
width: fit-content 这个是什么？
这个是外框自适应内里元素宽度的一种设置方法，新标准

红影 发表于 2022-6-5 23:02

马黑黑 发表于 2022-6-5 20:47
这个是外框自适应内里元素宽度的一种设置方法，新标准

哦哦，会怎样去适应，若是不够了，会把文字挤到一起么？

马黑黑 发表于 2022-6-5 23:36

红影 发表于 2022-6-5 23:02
哦哦，会怎样去适应，若是不够了，会把文字挤到一起么？

一般来说，width: fit-content 的设定，它适应里面的子元素，以最宽的那个撑开自己的宽度。所以，只要文字所依托的元素不令文本挤在一起，文本就不会挤到一堆来。

你可以试一下：

<div style="margin: auto; border: 1px solid; width: fit-content;">
    <p>不断加文字……</p>
</div>

加林森 发表于 2022-6-6 18:22

这个好方便啊。老黑真好！{:4_199:}

马黑黑 发表于 2022-6-6 19:21

加林森 发表于 2022-6-6 18:22
这个好方便啊。老黑真好！

改进后尺寸好控制一点

加林森 发表于 2022-6-6 19:23

马黑黑 发表于 2022-6-6 19:21
改进后尺寸好控制一点

嗯嗯，真是费心了。{:5_108:}

马黑黑 发表于 2022-6-6 19:24

加林森 发表于 2022-6-6 19:23
嗯嗯，真是费心了。

也没啥，就是做这个歌词同步的时候天天喝的，不够严谨

加林森 发表于 2022-6-6 19:30

马黑黑 发表于 2022-6-6 19:24
也没啥，就是做这个歌词同步的时候天天喝的，不够严谨

等空了我用你这个再去制作一个出来。

马黑黑 发表于 2022-6-6 19:32

加林森 发表于 2022-6-6 19:30
等空了我用你这个再去制作一个出来。

嗯，可以试试手
页: [1] 2
查看完整版本: 《愿》改进后的代码——歌词显示板毛玻璃效果