张红 发表于 2023-6-12 06:02

凤飞飞歌曲

<style type="text/css">
#outer{
      left: 0px;top:30px;
      width: 1000px;
      height:600px;
       box-shadow: 0px 0px 0px 0px #cccccc, 0px 0px 0px 0px #880000; overflow:
hidden;transform:rotate(0deg);background: url('https://storage.live.com/items/1965B2B1656C2AF6!16413?')0 0/100%100%;
      position: relative;
       display: grid;
       --opt: .85;
}
#outer::before { position: absolute; content: ''; background: url('https://storage.live.com/items/1965B2B1656C2AF6!16414?') repeat; width:100%; height: 100%; mix-blend-mode: screen; opacity: var(--opt); animation: opa linear 20s infinite alternate; }
#mLiDiv {position: relative; margin-top: 130px;margin-left: 650px; color:#000; width:350px;height:200px; font-size:16px; font-family:微软雅黑;z-index: 10;column-count: 0; }
#mLiDiv a { text-decoration: none; cursor:pointer; }
#mLiDiv a:hover { color:blue; }
#tmsg {
         position: absolute;
      font: normal 16px sans-serif;
      color: #fff;
         top:548px;
      left:860px;
}

#prog {
      position: absolute;
      width: 780px;
      height: 3px;
      cursor: pointer;
         top:557px;
         left:17px;
box-shadow:0px 0px 0px 0.5px #fff
}


</style>
               <div id="outer">
                  <div id="mLiDiv"></div>
               <divid="prog"></div>
                <span id="tmsg">00:00 | 00:00</span>
            
</div>
<script>
var muAr = [["https://storage.live.com/items/1965B2B1656C2AF6!16410?","敲敲门"],
["https://storage.live.com/items/1965B2B1656C2AF6!16411?","爱你在心口难开"],
["https://storage.live.com/items/1965B2B1656C2AF6!16412?","好好爱我"],
["https://storage.live.com/items/1965B2B1656C2AF6!16406?","巧合"],
["https://storage.live.com/items/1965B2B1656C2AF6!16408?","枫叶情"],
["https://storage.live.com/items/1965B2B1656C2AF6!16409?","呼唤"],
["https://storage.live.com/items/1965B2B1656C2AF6!16407?","雨的旋律"],
["https://storage.live.com/items/1965B2B1656C2AF6!16405?","爱的礼物"],
["https://storage.live.com/items/1965B2B1656C2AF6!16404?","我的心里没有他"],
["https://storage.live.com/items/1965B2B1656C2AF6!16403?","玫瑰玫瑰我爱你"],
["https://storage.live.com/items/1965B2B1656C2AF6!16402?","姑娘十八一朵花"],
["https://storage.live.com/items/1965B2B1656C2AF6!16400?","江水向东流"],
["https://storage.live.com/items/1965B2B1656C2AF6!16401?","溜溜的她"],
["https://storage.live.com/items/1965B2B1656C2AF6!16398?","我爱口哨"],
["https://storage.live.com/items/1965B2B1656C2AF6!16399?","绿鸟小夜曲"],
["https://storage.live.com/items/1965B2B1656C2AF6!16397?","草原之夜"]
];

var mLi = document.getElementById('mLiDiv');
var aud = document.createElement('audio');
var playIdx = 0;
var str = "";
for(j=0; j<muAr.length; j++) {
      str += (j+1) + ".<a id='list" + j + "' onclick='iPlay(" + j + ")' >" + muAr + "</a><br />";
}
mLi.innerHTML += str;

function iPlay(idx){
      playIdx = idx;
      aud.src = muAr;
      aud.play();
      nameRed(playIdx);
}
aud.onended = function() {
      playIdx ++;
      if(playIdx >= muAr.length) playIdx = 0;
    aud.src = muAr;
    aud.play();
nameRed(playIdx);
}

function nameRed(){
      for(k=0;k<muAr.length;k++){
                let listId = "list" + k;
                document.getElementById(listId).style.removeProperty("color");
      }
      listId = "list" + playIdx;
      document.getElementById(listId).style.color = "red";
}

      prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }

      aud.addEventListener('timeupdate', () => {
               prog.style.background= 'linear-gradient(90deg, rgba(0,0,255,1)' + aud.currentTime / aud.duration * 100 + '%, transparent 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;
      };

iPlay(playIdx);
</script>

容轩听雨 发表于 2023-6-12 12:15

画面雅致，歌曲经典，赞，问好朋友!

巫荣云师 发表于 2023-6-12 19:40

欣赏收藏老师的佳作《凤飞飞歌曲》。:handshake{:1_293:}问好点赞!

久久. 发表于 2023-6-12 23:01

张红晚上好！{:1_292:}

久久. 发表于 2023-6-12 23:01

帖子制作的漂亮，音乐好听   

久久. 发表于 2023-6-12 23:02

谢谢分享！支持点赞{:1_293:}

蓝魔 发表于 2023-6-12 23:20

欣赏一下，谢谢。
页: [1]
查看完整版本: 凤飞飞歌曲