马黑黑 发表于 2024-1-5 12:31

日历音乐帖模板

本帖最后由 马黑黑 于 2024-1-5 18:05 编辑 <br /><br /><style>
#mydiv { margin: -70px 0 0 calc(50% - 593px); width: 1024px; height: 678px; border: 4px solid rgba(0,0,0,.15); border-radius: 10px; background: gray url('https://638183.freep.cn/638183/t23/2/gvrf.jpg') 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: 20px;top: 10px; font: bold 2em/2.2em sans-serif; color: snow; text-shadow: 1px 1px #000; }
#rili { padding: 6px; top: 10px; 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; 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=22651392" autoplay loop></audio>
        <div id="rili"></div>
        <img id="myplayer" src="https://638183.freep.cn/638183/t23/btn/hshx.png" alt="" />
</div>

<script>
{
/* 音乐数组：总数不低于31个，来源于网易云音乐，或URL同一个网站前缀 + 不同后缀（需修改 playSong 函数）*/
let songs = [ ["完美主义","1983524772"], ["Enzalla - Spira","429261487"], ["小河小河","2062919073"], ["Dont Say No","22651392"], ["大西厢","136724"], ["筝鸣","1300995139"], ["红古尔","2029165786"], ["老唱片的诱惑","1415245956"], ["风云榜","201876"], ["酹江月","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 12:31

本帖最后由 马黑黑 于 2024-1-5 15:03 编辑

代码：<style>
#mydiv { margin: -70px 0 0 calc(50% - 593px); width: 1024px; height: 678px; border: 4px solid rgba(0,0,0,.15); border-radius: 10px; background: gray url('https://638183.freep.cn/638183/t23/2/gvrf.jpg') 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: 20px;top: 10px; font: bold 2em/2.2em sans-serif; color: snow; text-shadow: 1px 1px #000; }
#rili { padding: 6px; top: 10px; 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; 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=22651392" autoplay loop></audio>
        <div id="rili"></div>
        <img id="myplayer" src="https://638183.freep.cn/638183/t23/btn/hshx.png" alt="" />
</div>

<script>

/* 音乐数组：总数不低于31个，来源于网易云音乐，或URL同一个网站前缀 + 不同后缀（需修改 playSong 函数）*/
let songs = [ ["完美主义","1983524772"], ["Enzalla - Spira","429261487"], ["小河小河","2062919073"], ["Dont Say No","22651392"], ["大西厢","136724"], ["筝鸣","1300995139"], ["红古尔","2029165786"], ["老唱片的诱惑","1415245956"], ["风云榜","201876"], ["酹江月","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 12:43

本帖最后由 马黑黑 于 2024-1-5 12:44 编辑

帖子模板不依赖第三方JS资源，完全独立。

需要注意的事项请仔细查看代码中的注释。另，给一些基于CSS的说明：

#rili 选择器 ：max-width 设定至关重要，它是日历日期布局折行的关键，尺寸保持在 7 * .tbox 的宽度 + #rili 的 padding * 2 这样的规范；

#rili 选择器伪元素 ：日历界面背景年月；

.tbox 选择器 ：日期容器，加入 z-index 以防止交互操作权限被覆盖，值可自行斟酌。其伪类 hover和 active 用于提升交互动态品质，可根据需要设置不同的属性或前景色；

#myplayer ：播放控制器，可以是图片，可以是div等。它运行关键帧动画 rotating（可以自行设计动画）。

红影 发表于 2024-1-5 13:03

特别喜欢日历效果，黑黑现在给出了模版，真的太好了{:4_199:}

马黑黑 发表于 2024-1-5 13:06

红影 发表于 2024-1-5 13:03
特别喜欢日历效果，黑黑现在给出了模版，真的太好了

这个合适做大专辑。但要支持lrc歌词的话，需要很大的改装，库资源最好独立出来。

红影 发表于 2024-1-5 13:15

马黑黑 发表于 2024-1-5 13:06
这个合适做大专辑。但要支持lrc歌词的话，需要很大的改装，库资源最好独立出来。

能放这么多音乐已经是很厉害了，再加歌词代码就太多了。
每一日期对应一首音乐，太美了！正在仔细看代码，转眼看到黑黑的回复，真快啊{:4_173:}

马黑黑 发表于 2024-1-5 13:16

红影 发表于 2024-1-5 13:15
能放这么多音乐已经是很厉害了，再加歌词代码就太多了。
每一日期对应一首音乐，太美了！正在仔细看代码 ...

一般快

红影 发表于 2024-1-5 14:10

马黑黑 发表于 2024-1-5 13:16
一般快
这个能直接对应当天曲目，也厉害呢。
要是不是手动选，每天坐在这个帖子里都可以听到新音乐啊{:4_173:}

马黑黑 发表于 2024-1-5 15:05

红影 发表于 2024-1-5 14:10
这个能直接对应当它曲目，也厉害呢。
要是不是手动选，每天坐在这个帖子里都可以听到新音乐啊

这没啥。中午发的代码有点小问题，现已修正

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

马黑黑 发表于 2024-1-5 15:05
这没啥。中午发的代码有点小问题，现已修正

我根本看不出问题在哪，也不知道修改了哪里{:4_173:}

樵歌 发表于 2024-1-5 16:27

我等可以抄网易云中歌曲的ID号吗？
{:4_203:}

樵歌 发表于 2024-1-5 16:28

太了，31首呵，你收藏都是精典。再云翻 你前几天的帖子，听听歌{:4_173:}

樵歌 发表于 2024-1-5 16:35

把歌曲的ID号码，我在网易云中竟然没有找到{:4_201:}

起个网名好难 发表于 2024-1-5 16:50

好帖！每个日子都有一个美妙的歌曲。

起个网名好难 发表于 2024-1-5 16:52

马黑黑 发表于 2024-1-5 12:31
代码：

对 let 有偏好{:5_117:}

梦油 发表于 2024-1-5 17:26

你的日历越做越精彩。

侃大山 发表于 2024-1-5 17:51

都和日历有关，新的一年开始，让人更想到日子吧{:5_106:}

侃大山 发表于 2024-1-5 17:51

这么多好歌，厉害。

马黑黑 发表于 2024-1-5 18:03

红影 发表于 2024-1-5 15:41
我根本看不出问题在哪，也不知道修改了哪里

中午着重解决一个问题，忽略了另一个问题

马黑黑 发表于 2024-1-5 18:03

侃大山 发表于 2024-1-5 17:51
这么多好歌，厉害。

感谢wyyyy
页: [1] 2 3 4
查看完整版本: 日历音乐帖模板