小辣椒 发表于 2024-1-5 21:27

爱你一万年 TO：黑黑（学习日历音乐帖）


<style>
#mydiv { margin: 150px 0 0 calc(50% - 781px); width: 1400px; height: 780px; border: 4px solid rgba(0,0,0,.15); border-radius: 10px; background: gray url('https://wj.zp68.com/lxx/yunhua/2023/08/17/3IF.gif') no-repeat center/cover; box-shadow: 4px 4px 16px rgba(0,0,0,.25); position: relative; display: grid; place-items: center; }
#mydiv::before { position: absolute; content: attr(data-title); left: 42%;top: 87%; font: bold 2em/2.2em sans-serif; color: snow; text-shadow: 1px 1px #000; }
#rili { padding: 6px; top: 20px; max-width: 222px; display: flex; flex-direction: row; flex-wrap: wrap; color: #eee; box-sizing: border-box; position: absolute; }
#rili::before { position: absolute; content: attr(data-bg); width: 100%; height: 100%; color: rgba(0,0,0,.25); display: grid; place-items: center; font: bold 2em sans-serif; }
#iRed { position: absolute; color: red; transition: .5s; }
#iRed:hover { font-size: 40px; font-weight: bold; }
#myplayer { position: absolute; right: 80px; bottom: 80px; cursor: pointer; animation: rotating 5s infinite linear var(--state); }
.tbox { width: 30px; height: 26px; text-align: center; font: normal 16px/26px sans-serif; cursor: pointer; z-index: 10; }
.tbox:hover { color: pink; }
.tbox:active { color: navy; }
@keyframes rotating { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=109785" autoplay loop></audio>
      <div id="rili"></div>
      <img id="myplayer" src="https://xlaj.cn/assets/file/zp/20240105210734.png" alt="" />
</div>

<script>

/* 音乐数组：总数不低于31个，来源于网易云音乐，或URL同一个网站前缀 + 不同后缀（需修改 playSong 函数）*/
let songs = [ ["刘德华--暗里着迷","29723022"], ["Enzalla - Spira","429261487"], ["小河小河","2062919073"], ["男人哭吧不是罪","男人哭吧不是罪"], ["刘德华--爱你一万年 ","29723035"], ["刘德华--男人哭吧不是罪","109785"], ["刘德华--笨小孩","29723024"], ["刘德华--仍唱我的歌","110423"], ["刘德华--孤星泪","109751"], ["酹江月","1357056838"], ["暗夜舞者","1950170789"], ["Strobe","22417149"], ["殊途同归","1848494864"], ["战曲","552433256"], ["落山风","2005329783"], ["梦驼铃","359379"], ["月是故乡明","1965108307"], ["滚滚长江东逝水","27591735"], ["失序者","2087973934"], ["网","526547640"], ["月光の雲海","442760"], ["云","520459540"], ["似水年华","2085110548"], ["冰の星","1343982589"], ["鸿蒙","2068482355"], ["檐下客","1298410511"], ["半纸心事","1914628093"], ["逃脱引力","1996509752"], ["精神入侵","1810150717"], ["关山月","1451656076"], ["问情","1481922620"] ];
/* 画日历并播放今天曲目 */
(function () {
      let ar = '日一二三四五六'.split('').map(c => `<div class="tbox">${c}</div>`);
      let output = ar.join('');
      let y = new Date().getFullYear(), m = new Date().getMonth();
      let days = new Date(y, m+1, 0).getDate();
      let day1st = new Date(y, m).getDay();
      let today = new Date().getDate();
      Array.from({length: days + day1st}).forEach((item,key) => {
                let idx = key < day1st ? '' : (key - day1st + 1);
                if(idx) {
                        if(idx == today) idx = `<span id="iRed">${idx}</span>`;
                        let sUrl = songs, sName = songs;
                        output += `<div class="tbox" title="${sName}" onclick="playSong(${sUrl},'${sName}');this.style.color='navy';">${idx}</div>`;
                }else{
                        output += '<div class="tbox"></div>';
                }
      });
      rili.innerHTML = output;
      rili.dataset.bg = `${y}年${m+1}月`;
      let songName = songs, songUrl = songs;
      playSong(songUrl,songName);
})();
/* 播放音频函数 ：相同的url前缀 + 不同的后缀id */
function playSong(id,song) {
      let url = 'https://music.163.com/song/media/outer/url?id=' + id;
      aud.src = url;
      mydiv.dataset.title = song;
};
/* 其他相关操作 */
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
myplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

</script>

小辣椒 发表于 2024-1-5 21:28

就修改了九首音乐，其他都是黑黑原来的链接，偷懒了{:4_170:}@马黑黑

小辣椒 发表于 2024-1-5 21:29

现成的图图，就扣了个花花png，速度测试一下

小辣椒 发表于 2024-1-5 21:30

黑黑爱S你了，小辣椒反正纯套用玩玩很轻松了，秒做{:4_205:}

红影 发表于 2024-1-5 21:36

这背景真漂亮，很偶生活气息，电视里还有歌手演唱呢。这个制作真漂亮。欣赏亲爱的好帖，黑黑收礼开心{:4_199:}

红影 发表于 2024-1-5 21:41

这个日历效果特别好，每天打开都是不同的歌曲呢。还能挑选其他日子的对应歌曲听，特别好{:4_204:}

亦是金 发表于 2024-1-5 21:52

欣赏小辣椒的美帖！{:4_187:}我也要跟着学着做一个玩玩，争取做一个好学生！{:4_205:}

小辣椒 发表于 2024-1-5 22:10

红影 发表于 2024-1-5 21:36
这背景真漂亮，很偶生活气息，电视里还有歌手演唱呢。这个制作真漂亮。欣赏亲爱的好帖，黑黑收礼开心{:4_19 ...

亲爱的，现成的以前玩过的图图

小辣椒 发表于 2024-1-5 22:10

红影 发表于 2024-1-5 21:41
这个日历效果特别好，每天打开都是不同的歌曲呢。还能挑选其他日子的对应歌曲听，特别好

是啊，每天一首歌，都不一样的

小辣椒 发表于 2024-1-5 22:11

亦是金 发表于 2024-1-5 21:52
欣赏小辣椒的美帖！我也要跟着学着做一个玩玩，争取做一个好学生！

哈哈，前辈你已经是优秀学生了，小辣椒作业都许多没有完成的

马黑黑 发表于 2024-1-5 22:33

小辣椒 发表于 2024-1-5 21:28
就修改了九首音乐，其他都是黑黑原来的链接，偷懒了@马黑黑

眼睛还需要修养，弄这么多就不错了

醉美水芙蓉 发表于 2024-1-5 22:37

红影 发表于 2024-1-5 22:52

小辣椒 发表于 2024-1-5 22:10
亲爱的，现成的以前玩过的图图

这个图图效果特别好，太美了{:4_199:}

小辣椒 发表于 2024-1-5 22:53

马黑黑 发表于 2024-1-5 22:33
眼睛还需要修养，弄这么多就不错了

这个链接还真的快的，网易现成的{:4_189:}

小辣椒 发表于 2024-1-5 22:54

醉美水芙蓉 发表于 2024-1-5 22:37
欣赏小辣椒美贴！

谢谢水芙蓉欣赏{:4_171:}

红影 发表于 2024-1-5 22:55

小辣椒 发表于 2024-1-5 22:10
是啊，每天一首歌，都不一样的

特别适合做一个喜欢的专辑呢{:4_187:}

马黑黑 发表于 2024-1-5 23:57

小辣椒 发表于 2024-1-5 22:53
这个链接还真的快的，网易现成的

{:4_181:}

庶民 发表于 2024-1-6 06:32

好感动的。

千羽 发表于 2024-1-6 19:15

就好像在家里看电视呢，那几盆花加的好，生气勃勃的{:4_187:}

千羽 发表于 2024-1-6 19:17

画面温馨，幸福，日历效果漂亮。{:4_187:}
页: [1] 2
查看完整版本: 爱你一万年 TO：黑黑（学习日历音乐帖）