看看挺好吃的{:4_173:}
但要学习做菜我一点兴趣都没有呢{:4_203:}
谢谢队长分享，想学习做菜的朋友可以跟做了{:4_199:}
本帖最后由 加林森 于 2022-3-6 20:22 编辑 <br /><br /><div class="quote"><blockquote><font size="2"><a href="forum.php?mod=redirect&goto=findpost&pid=1315950&ptid=53804" target="_blank"><font color="#999999">小辣椒 发表于 2021-10-31 15:41</font></a></font><br>看看挺好吃的</blockquote></div><br>真的很好吃。<div><br></div><div><div><br></div><div><style type="text/css"></div><div><br></div><div>.mnBox { position: relative; margin: 0 auto; padding: 35px; width: 660px; border: none; border-top: 6px solid #000; border-radius: 10px; background: #b3c3c3; }</div><div>.ctBox { margin: 0; padding: 30px; background: #fff; min-height: 300px; border-radius: 10px; }</div><div>.ctBox p,img, h2,button { text-align:center; }</div><div>#lrcDiv { margin: auto; width: 300px; height: 43px; overflow: hidden; position: relative; padding: 8px; text-align:center; }</div><div>#lrcDiv ul, lrcli { margin: 0; padding: 0; }</div><div>#lrcUl { position: absolute; left:10px;top: 0; }</div><div>#lrcUl li { height: 20px; font-size:14px; line-height:20px;left:50px; color: black; list-style-type: none; }</div><div>#myplayer { outline: none; list-style-type: none; }</div><div><br></div><div></style></div><div><br></div><div><div class="mnBox"></div><div> <div class="ctBox"></div><div> <p style="text-align:center;"><img alt="550" height="720" src="https://pic.imgdb.cn/item/6224a1305baa1a80ab5fedbf.jpg" /><br></p></div><div> <h2 style="padding-bottom: 10px;">映山红 </h2></div><div> <h2 style="text-align:center;">天音唱片</h2></div><div> <pre></div><div><br></div><div> 看见小辣椒分享的</div><div> 歌词同步高亮制作 </div><div> 在这个css边框中测试一下</div><div> 感觉这个歌词同步高亮效果</div><div> 加上这个边框特别漂亮</div><div> 这样分享音乐也是不错</div><div> 感谢小辣椒又一个精彩分享</div><div> 我也跟到制作一个，感谢小辣椒及老黑！</div><div> </div><div> 感谢老黑和小辣椒的精彩分享</div><div> 自动播放歌词同步高亮制作</div><div> </div><div> </div><div> </pre></div><div> <p style="margin: auto; width:120px; text-align:center; font-size:14px; color:#000;"><marquee scrollamount="2" direction="left" ><h3 style="list-style-type: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); overflow: hidden;"><font color="#333333" face="Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif"><span style="font-size: 16.38px; font-weight: 400; white-space: nowrap;">映山红-天音唱片</marquee></p></span></font></h3></div><div><br></div><div> <p style="text-align:center;"><audio id="myplayer" src="<span style="color: rgb(0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif;">http://www.kumeiwp.com/sub/filestores/2022/03/06/cd2c043a164e9a67581658426070fb2f.mp3</span>" controls="controls" autoplay="autoplay"></audio></p></div><div> <div id="lrcDiv"><ul id="lrcUl"></ul></div></div><div> <p style="margin: 20px; text-align:center;">加林森 2022 02 25</p></div><div> </div></div><div></div></div><div><br></div><div><script language="javascript"></div><div><br></div><div>var lrcAr = [</div><div>["00:00.11",""],</div><div>["00:03.11"," 相约北京(Live)"],</div><div>["00:10.48"," 歌手：常石磊、关晓彤"],</div><div>["00:16.76"," LRC编辑：加林森"],</div><div>["00:21.64"," 梦想 开出花我们绽放吧"],</div><div>["00:27.07"," 这奇迹闪耀在 华夏的冬岭上"],</div><div>["00:33.60"," 飘雪千万里 火树银花"],</div><div>["00:39.83"," 这温暖从家乡 飞到远空了"],</div><div>["00:46.26"," 天高海也大 我们相约吧"],</div><div>["00:53.24"," 这团聚就好像 地球圆圆嗒"],</div><div>["00:59.68"," 双手拨云开 世界抱一下"],</div><div>["01:04.36"," 我和你的感动 与生俱来的"],</div><div>["01:06.75"," 可爱的我 相约可爱的你"],</div><div>["01:13.83"," 纯洁的冰雪 怀着童真记趣"],</div><div>["01:16.91"," 我的快乐 牵动你的心灵"],</div><div>["01:22.56"," 让不舍 一次次相依"],</div><div>["01:29.03"," 可爱的我 相约可爱的你"],</div><div>["01:35.95"," 激情的约会 点亮爱的出发地"],</div><div>["01:42.15"," 雪花燃烧 帅得如此神奇"],</div><div>["01:44.73"," 朝阳下 北京会想你 会想你"],</div><div>["01:49.31"," 天高海也大 我们相约吧"],</div><div>["01:55.45"," 这团聚就好像 地球圆圆嗒"],</div><div>["02:02.83"," 双手拨云开 世界抱一下"],</div><div>["02:08.91"," 我和你的感动 与生俱来的"],</div><div>["02:15.44"," 可爱的我 相约可爱的你"],</div><div>["02:24.03"," 纯洁的冰雪 怀着童真记趣"],</div><div>["02:48.19"," 我的快乐 牵动你的心灵"],</div><div>["02:55.01"," 让不舍 一次次相依"],</div><div>["03:01.24"," 可爱的我 相约可爱的你"],</div><div>["03:05.87"," 激情的约会 点亮爱的出发地"],</div><div>["03:08.22"," 雪花燃烧 帅得如此神奇"],</div><div>["03:15.46"," 朝阳下 北京会想你 会想你"],</div><div>["03:18.50"," 可爱的我 相约可爱的你"],</div><div>["03:24.18"," 纯洁的冰雪 怀着童真记趣"],</div><div>["03:30.36"," 我的快乐 牵动你的心灵"],</div><div>["03:37.54"," 让不舍 一次次相依"],</div><div>["03:43.55"," 可爱的我 相约可爱的你"],</div><div>["03:46.38"," 激情的约会 点亮爱的出发地"],</div><div>["03:51.02"," 雪花燃烧 帅得如此神奇"],</div><div>["03:57.20"," 朝阳下 北京会想你 会想你"],</div><div>["04:04.53"," 朝阳下 北京会想你 会想你"],</div><div>["04:04.53"," 品尝你赐给的泪水"],</div><div>["04:10.56"," 或许你曾为我流泪"],</div><div>["04:17.09"," 如今你让我痛彻心扉"],</div><div>["04:27.51"," 谢谢欣赏"]</div><div><br></div><div>["04:10.56"," 谢谢欣赏"]</div><div>];</div><div>var myaud = document.getElementById('myplayer'); //播放器标识</div><div>var lrcUl = document.getElementById('lrcUl'); //歌词显示元素标识</div><div>//处理lrc歌词数组：时间转换成秒、歌词放入li标签</div><div>for(j=0; j<lrcAr.length; j++){</div><div> lrcAr = toSec(lrcAr);</div><div> lrcUl.innerHTML += "<li id='li" + lrcAr + "'>" + lrcAr + "</li>";</div><div>}</div><div>//lrc时间信息转为秒</div><div>function toSec(lrcTime) {</div><div> let tmpAr = lrcTime.split(':');</div><div> lrcTime = tmpAr * 60 + parseInt(tmpAr);</div><div> return lrcTime;</div><div>}</div><div>//同步高亮、翻滚歌词</div><div>myaud.ontimeupdate = function() {</div><div> let tt = this.currentTime;</div><div> for(j=0; j<lrcAr.length; j++){</div><div> if(tt > lrcAr){</div><div> if(j > 0){</div><div> let idxLast = lrcAr;</div><div> document.getElementById("li" + idxLast).style.color = "black";</div><div> lrcUl.style.top ="-" + (j * 20 - 20) + "px";</div><div> }</div><div> let idx = lrcAr;</div><div> document.getElementById("li" + idx).style.color = "red";</div><div> }</div><div> }</div><div>}</div><div>// 播放结束重置歌词样式</div><div>myaud.onended = function() {</div><div> document.getElementById("li" + lrcAr).style.color = "black";</div><div> lrcUl.style.top = 0;</div><div> this.play();</div><div>}</div><div><br></div><div></script></div></div><div><br></div>
本帖最后由 加林森 于 2022-3-11 12:18 编辑 <br /><br />小辣椒 发表于 2021-10-31 15:41
但要学习做菜我一点兴趣都没有呢
你不喜欢就让别人去做，你吃就行了嘛。{:4_189:}
<style type="text/css">
.picBtn {
width: 100px;
height: 100px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('https://pic.imgdb.cn/item/622a00ea5baa1a80ab412ada.gif') no-repeat;
cursor: pointer;
</style>
<div style="position: relative; left:-220px; top: 150px; width:1000px;text-align:center;">
<img alt="" src="https://pic.imgdb.cn/item/622ac68b5baa1a80abaf5299.jpg" style="box-shadow:1px 1px 2px #666; border:solid 1px #000;" />
<div style="position:absolute; width:250px; left:200px; top: 150px; text-align:center;">
<center >
<p ><font color="#ec1212" size="4" >
<marqueescrollamount="4" direction="left" >时间煮雨-郁可唯 </marquee>
<p><audio id="music" src="http://www.kumeiwp.com/sub/filestores/2021/01/28/be958e39542add82c9e277bebe23f6b7.mp3" loop="loop" autoplay="autoplay" ></audio><br> </p>
<div style="position:absolute; width:250px; left:100px; top: -90px; text-align:center;">
<button id="picBtn" class="picBtn"></button>
</div>
</div>
</div>
<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/622a00ea5baa1a80ab412ada.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/622a01115baa1a80ab414665.png')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://pic.imgdb.cn/item/622a01115baa1a80ab414665.png')";
})
</script>
<br><br><br><br><br><br><br><br>
小辣椒 发表于 2021-10-31 15:42
谢谢队长分享，想学习做菜的朋友可以跟做了
不客气的
加林森 发表于 2021-10-31 13:10
你可以做点吃吃。
我是专业吃的
马黑黑 发表于 2021-10-31 16:23
我是专业吃的
你专人喂你啊{:4_170:}
加林森 发表于 2021-10-31 16:18
真的很好吃。
队长，辣的我不吃的{:4_173:}
加林森 发表于 2021-10-31 16:19
你不喜欢就让别人去做，你吃就行了嘛。
我是就只吃不做，没有人做要么吃泡泡面，要么外卖{:4_173:}
小辣椒 发表于 2021-10-31 16:39
队长，辣的我不吃的
这个不辣的，你不要看见有辣椒就以为辣了，很清淡的哦。
小辣椒 发表于 2021-10-31 16:39
我是就只吃不做，没有人做要么吃泡泡面，要么外卖
幸福哦。只管吃就行了。我还得经常炒菜给家人吃哦。
加林森 发表于 2021-10-31 16:42
这个不辣的，你不要看见有辣椒就以为辣了，很清淡的哦。
哦，不辣的辣椒
加林森 发表于 2021-10-31 16:43
幸福哦。只管吃就行了。我还得经常炒菜给家人吃哦。
问题我炒菜他们不要吃怎么办
小辣椒 发表于 2021-10-31 16:44
哦，不辣的辣椒
是啊小红辣微甜，小青辣也不辣，只是搭配主菜的配角。
小辣椒 发表于 2021-10-31 16:44
问题我炒菜他们不要吃怎么办
自己吃{:4_170:}
加林森 发表于 2021-10-31 16:46
是啊小红辣微甜，小青辣也不辣，只是搭配主菜的配角。
哦，这个颜色特别好看，看见辫子发我他吃的菜10个9个都有辣的，辣椒颜色还红的特别漂亮
加林森 发表于 2021-10-31 16:47
自己吃
哈哈~~{:4_170:}
队长我准备下了。去吃饭了
小辣椒 发表于 2021-10-31 16:49
哦，这个颜色特别好看，看见辫子发我他吃的菜10个9个都有辣的，辣椒颜色还红的特别漂亮
是的啊，好看又开胃。
小辣椒 发表于 2021-10-31 16:50
哈哈~~
队长我准备下了。去吃饭了
好的，你去吃饭吧。