论坛 › 欢乐水吧 › 祝大家腊八节快乐

老谟深虑 发表于 2025-1-7 11:59

祝大家腊八节快乐

          空格今日是腊八节，我借用黑土恋老师的动图，在此向黑土恋老师致谢，学用亚伦老师的同步歌词播放器代码制作《歌配图—腊八粥》。



<style>
#pNode{
    width:750px;height:450px;
    background:url(https://cccimg.com/view.php/6a50627cc25d88dbe5b18cd3dc54490c.gif) no-repeat center / cover;
    position:relative;
    margin:auto;
}


#bfqbg {
        width: 100%;
        height: 90px;
background:url(https://cccimg.com/view.php/3bcd83470b5d5f6e34e7ee2ad4048243.jpg) no-repeat center/cover;
        border-radius:2px;
        left:0px;bottom:0px;
        position: absolute;overflow: hidden;
        z-index: 12;
}
#btp{position:absolute;height:80px;width:80px;bottom:5px; left:8px;}
#btp img{height: 100%;width: 100%;}
#mplayer {z-index: 100;position:absolute;bottom:10px; left:35px;width:28px;height:28px;}
#tmsg {position: absolute;z-index: 91;
      font: normal 12px sans-serif;
      color: blue;
      bottom:10px; right:20px}

#prog {position: absolute;z-index: 91;
      width: 730px;
      height: 1%;
      cursor: pointer;
         bottom:14px;left:120px;
color: blue;
}
#bt{ width: 500px; height: 50px;color: blue; position: absolute; left:120px;top:10px;font:bold 16px 雅黑;z-index: 21;}
.lrc{z-index: 20;
    width: 700px;bottom:-18px; left:180px;
    height: 100px;
    overflow: hidden;
    display: block;position: absolute;
    margin: 0 auto;
}
.lrc #ullrc{
    width: 700px;
    padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
    font-family:雅黑;
    font-size: 0px;
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 25px;
    color: blue;}
</style>

<div id="pNode">
    <div id="bfqbg">
      <img id="btp" src="https://cccimg.com/view.php/6a50627cc25d88dbe5b18cd3dc54490c.gif" alt="" />
      <div id="bt">腊八粥 - 儿歌</div>
      <div ><img   id="mplayer" src="http://image.hnol.net/c/2022-02/01/23/202202012325163161-5769293.png" alt="" /></div>
      <div id="tmsg">00:00 /00:00</div>
      <divid="prog"></div>
      <divclass="lrc">
            <ul id="ullrc"></ul>
      </div>
    </div>
    <audio id="aud" src="https://cccimg.com/view.php/aaba5a9c7f73e523eedda361555ae376.mp3" loop autoplay></audio>
</div>

<script >
var lrc = `腊八粥 - 瓜瓜龙启蒙儿歌
词：Mengxi Ran
曲：Mengxi Ran
诗：春节民谣
编曲：Matthew He
录音：Tiange Wang
混音：Tiange Wang
小孩小孩你别馋
过了腊八就是年
腊八粥 喝几天
哩哩啦啦二十三
啦啦啦啦过年啦
啦啦啦啦过年啦
二十三 糖瓜粘
二十四 扫房子
二十五 磨豆腐
二十六 去买肉
二十七 宰公鸡
二十八 把面发
二十九 蒸馒头
三十晚上熬一宿
初一初二满街走
啦啦啦啦过年啦
啦啦啦啦过年啦
啦啦啦啦过年啦
啦啦啦啦过年啦
`;
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}
var lrcArray = getLrcArray();
function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      ullrc.appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
    var lrc_li_height = 70, lrc_ul_height = 60;
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}ullrc.style.marginTop = -top + "px";
    var activeLi = ullrc.querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");}
ullrc.children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = aud.currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
aud.ontimeupdate = setPosition;

(function() {
var image= document.getElementById("Img");
mplayer.onclick = function() {
        if (aud.paused) {
                aud.play();Img.play();
        } else {
                aud.pause();Img.stop();
        }
}
aud.addEventListener("play", function (e) {
        mplayer.src="http://image.hnol.net/c/2022-02/01/23/202202012325163161-5769293.png";
}, false);
aud.addEventListener("pause", function (e) {
        mplayer.src="http://image.hnol.net/c/2022-02/01/23/202202012327333961-5769293.png";
}, false);})();


/*进度条 进度时间*/
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gra**nt(90deg, #00ff00, #00ff00, #00ff00 ' + aud.currentTime / aud.duration * 100 + '%, #cccccc 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' / ' + toMin(aud.duration);

      });
let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };
/*结束*/
</script>

樵歌 发表于 2025-1-7 13:00

咱们这些传统也是挺有意思的。在那个农耕文明时代，过年过节就韵味着有好的吃，想在那吃不饱穿不暖的年代，过年可是孩子最高兴的日子。

梦江南 发表于 2025-1-7 14:36

欣赏老师佳作，祝老师腊八节快乐。

起个网名好难 发表于 2025-1-7 15:30

https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2025%2F0106%2F7f305e77j00spo2lv001wd000hs00npg.jpg&thumbnail=660x2147483647&quality=80&type=jpg

老谟深虑 发表于 2025-1-7 15:57

樵歌 发表于 2025-1-7 13:00
咱们这些传统也是挺有意思的。在那个农耕文明时代，过年过节就韵味着有好的吃，想在那吃不饱穿不暖的年代， ...

          谢谢老师的精彩点评，问好！

老谟深虑 发表于 2025-1-7 15:58

梦江南 发表于 2025-1-7 14:36
欣赏老师佳作，祝老师腊八节快乐。

         谢谢老师的支持，腊八节快乐！

老谟深虑 发表于 2025-1-7 15:59

起个网名好难 发表于 2025-1-7 15:30


         谢谢老师的腊八粥，腊八节快乐！

红影 发表于 2025-1-7 17:15

这帖子真喜庆漂亮。儿歌也好听，把腊八后的过年习俗说得那么好呢{:4_187:}

红影 发表于 2025-1-7 17:15

欣赏老谟深虑老师好帖，借帖同祝大家腊八节快乐{:4_187:}{:4_177:}

梦油 发表于 2025-1-7 17:16

祝福老谟深虑和朋友们腊八快乐、幸福安康！

樵歌 发表于 2025-1-8 08:18

老谟深虑 发表于 2025-1-7 15:57
谢谢老师的精彩点评，问好！

问好{:4_190:}三九温暖

老谟深虑 发表于 2025-1-8 15:41

红影 发表于 2025-1-7 17:15
这帖子真喜庆漂亮。儿歌也好听，把腊八后的过年习俗说得那么好呢

          谢谢老师的精彩点评！

老谟深虑 发表于 2025-1-8 15:42

红影 发表于 2025-1-7 17:15
欣赏老谟深虑老师好帖，借帖同祝大家腊八节快乐

         谢谢祝福，谢谢评精鼓励！

老谟深虑 发表于 2025-1-8 15:43

梦油 发表于 2025-1-7 17:16
祝福老谟深虑和朋友们腊八快乐、幸福安康！

            谢谢老师的支持，祝老师幸福安康！

老谟深虑 发表于 2025-1-8 15:44

樵歌 发表于 2025-1-8 08:18
问好三九温暖

          谢谢！下午好！

梦油 发表于 2025-1-8 17:05

老谟深虑 发表于 2025-1-8 15:43
谢谢老师的支持，祝老师幸福安康！

老谟深虑朋友别客气。

红影 发表于 2025-1-8 21:13

老谟深虑 发表于 2025-1-8 15:41
谢谢老师的精彩点评！

老谟深虑老师太客气了，应该谢谢你带来的好帖才是{:4_187:}

红影 发表于 2025-1-8 21:14

老谟深虑 发表于 2025-1-8 15:42
谢谢祝福，谢谢评精鼓励！

老谟深虑老师带来这么精美的帖子，必须的啊{:4_173:}

老谟深虑 发表于 2025-1-9 18:06

红影 发表于 2025-1-8 21:14
老谟深虑老师带来这么精美的帖子，必须的啊

            非常感谢，都是向老师们学习的。

红影 发表于 2025-1-9 21:41

老谟深虑 发表于 2025-1-9 18:06
非常感谢，都是向老师们学习的。

做得很漂亮呢，很赞{:4_187:}

查看完整版本: 祝大家腊八节快乐