【黑师代码】有歌的日子（小九生日快乐！4.1）
本帖最后由 南无月 于 2024-3-30 21:08 编辑 <br /><br /><style>#mydiv { margin: 130px 0 0 calc(50% - 931px); width: 1700px; height: 900px; border: 4px solid rgba(0,0,0,.15); border-radius: 10px; background: gray url('https://pic.imgdb.cn/item/6598ceeb871b83018a7634a1.webp') no-repeat center/cover; box-shadow: 4px 4px 16px rgba(0,0,0,.25); position: relative; display: grid; place-items: center;overflow: hidden; }
#mydiv::before { position: absolute; content: attr(data-title); right: 590px;bottom: 200px; font: bold 2em/2.2em sans-serif; color: LightSteelBlue; text-shadow: 1px 1px #000;screen;opacity: .62; z-index: 4; }
#rili { padding: 6px; left: 220px;top: 100px; 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;right: 600px;bottom: 20px;z-index: 12; mix-blend-mode: screen;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; }
#vid { position: absolute;width: 100%; height: 110%; top:-180px;object-fit: cover; mix-blend-mode: screen;opacity: .62; }
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/02/01/5b4ef06f1969e.mp4" muted loop></video>
<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://pic.imgdb.cn/item/6598dd69871b83018ab160ce.gif" alt="" />
</div>
<script>
/* 音乐数组：总数不低于31个，来源于网易云音乐，或URL同一个网站前缀 + 不同后缀（需修改 playSong 函数）*/
let songs = [ ["生日快乐","5279993"],
["望 - 周深","1814080666"],
["再 回 首","2112262812"],
["愿-周深","29737768"],
["爱若琉璃","1436150979"],
["起 风 了","1475596788"],
["岁月周深","2106791516"],
["雪花落下","1429392929"],
["身骑白马","2015499286"],
["是好孩子","297587"],
["喀秋莎","359457"],
["听 我 说","1415078941"],
["半 壶 纱","2122898481"],
["南屏晚钟","359402"],
["坠入星光","1959439181"],
["随风周深","1954382369"],
["浮光周深","2112196350"],
["千千阕歌","212233"],
["孤岛蓝鲸","1465313631"],
["花开忘忧","2016388224"],
["-如愿-","1937110718"],
["梨花又开放","34928665"],
["兰 亭 序","1974403336"],
["等你归来","1873136304"],
["人间烟火","1940210058"],
["锦 瑟 年","1837780432"],
["-活着-","29600712"],
["大鱼周深","1491495234"],
["飘洋过海","30903117"],
["路过人间","1495052210"],
["花开不惑","1498555234"] ];
/* 画日历并播放今天曲目 */
(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 = () => aud.paused ? (mydiv.style.setProperty('--state', 'paused'), vid.pause()) : (mydiv.style.setProperty('--state','running'), vid.play());
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
myplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>
<br><br><br><br><br><br> 本帖最后由 南无月 于 2024-3-30 21:11 编辑
@小九
点击日历每一天都是一首歌，生日快乐！{:4_191:}{:4_204:}
["生日快乐","5279993"],
["望 - 周深","1814080666"],
["再回首","2112262812"],
["愿-周深","29737768"],
["爱若琉璃","1436150979"],
["起 风 了","1475596788"],
["岁月-周深","2106791516"],
["雪花落下","1429392929"],
["身骑白马","2015499286"],
["我们都是好孩子","297587"],
["喀秋莎","359457"],
["听 我 说","1415078941"],
["半 壶 纱","2122898481"],
["南屏晚钟","359402"],
["坠入星光","1959439181"],
["随风-周深","1954382369"],
["浮光-周深","2112196350"],
["千千阕歌","212233"],
["化身孤岛的鲸","1465313631"],
["花开忘忧","2016388224"],
["-如愿-","1937110718"],
["梨花又开放","34928665"],
["兰 亭 序","1974403336"],
["等你归来","1873136304"],
["人间烟火","1940210058"],
["锦瑟年","1837780432"],
["-活着-","29600712"],
["大鱼周深","1491495234"],
["飘洋过海来看你","30903117"],
["路过人间","1495052210"],
["花开不惑","1498555234"]
这个图图真美，特别是蓝色的背景，很喜欢！ 谢谢南无月的祝福！ 感恩感谢！{:4_187:}{:4_176:} 南无月 发表于 2024-3-29 22:14
@小九
点击日历每一天都是一首歌，生日快乐！
是吗，那明天来听听{:4_176:} 真好看 日历的每个日子对应一首歌，这个厉害了。
制作这么美，还有这么厉害的黑科技，月儿的这个贺礼含金量很高啊{:4_199:} 还真是有歌的日子，这么多歌儿呢。帖子标题也起得很有趣呢{:4_173:}
烟雾的动态按钮也好美。月儿的帖子处处美好{:4_187:} 要是点击时对应的歌名能跳出来就更好了{:4_173:}
九儿收礼开心，生日快乐{:4_187:} 借南无月美帖祝小九生日快乐。 红影 发表于 2024-3-30 10:44
日历的每个日子对应一首歌，这个厉害了。
制作这么美，还有这么厉害的黑科技，月儿的这个贺礼含金量很高啊 ...
这个制作确实很厉害{:4_187:} 梦油 发表于 2024-3-30 11:16
借南无月美帖祝小九生日快乐。
有歌的日子天天快乐！{:4_187:} 南屏晚钟，美好的回忆{:4_187:} 小九 发表于 2024-3-29 22:54
这个图图真美，特别是蓝色的背景，很喜欢！ 谢谢南无月的祝福！ 感恩感谢！
小九你来啦。。喜欢就太好啦。。
刚搜了你在花潮的贴子，挑了周深的歌和一部分你之前发过的音乐。。
希望你能喜欢哦。。
{:4_199:}{:4_204:} 小九 发表于 2024-3-29 22:54
是吗，那明天来听听
{:4_199:}换了一部分歌曲，知道你喜欢周深，找了几首可以外链的。。
还要换哪些，你告诉我。。我给你换上啊。。 小文 发表于 2024-3-29 23:15
真好看
谢谢小文支持鼓励。。{:4_190:} 红影 发表于 2024-3-30 10:44
日历的每个日子对应一首歌，这个厉害了。
制作这么美，还有这么厉害的黑科技，月儿的这个贺礼含金量很高啊 ...
{:4_187:}
这个是日历贴出来后，
央求黑师做成的专辑效果，
感觉效果十分惊艳。。
感谢@马黑黑 红影 发表于 2024-3-30 10:47
还真是有歌的日子，这么多歌儿呢。帖子标题也起得很有趣呢
烟雾的动态按钮也好美。月儿的帖子处 ...
小九生日，歌一样的美好送给她{:4_187:} 南无月 发表于 2024-3-30 17:56
换了一部分歌曲，知道你喜欢周深，找了几首可以外链的。。
还要换哪些，你告诉我。。我给你换 ...
谢谢无月，太有心了{:4_187:} 红影 发表于 2024-3-30 10:48
要是点击时对应的歌名能跳出来就更好了
九儿收礼开心，生日快乐
嗯嗯，鼠标移动到日期可以看到。
另外你看一下人物旁边，按纽里面，可以显示歌名的。。{:4_187:}
比如今天显示的就是且听风吟，明天不一样的 小九 发表于 2024-3-30 16:30
这个制作确实很厉害
厉害的不是我。。{:4_170:}