日历 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2024-1-3 13:02

日历

本帖最后由马黑黑于 2024-1-3 19:24 编辑 <br /><br /><style>
#mydiv { margin: 0 0 0 calc(50% - 681px); width: 1200px; height: 588px; border: 4px solid rgba(0,0,0,.15); border-radius: 10px; background: gray url('https://638183.freep.cn/638183/t24/jpg/nscy.jpg') no-repeat center/cover; box-shadow: 4px 4px 16px rgba(0,0,0,.25); position: relative; display: grid; place-items: center; }
#rili { padding: 6px; top: 10px; max-width: 222px; display: flex; flex-direction: row; flex-wrap: wrap; color: #eee; box-sizing: border-box; user-select: none; cursor: pointer; position: absolute; }
#rili::before { position: absolute; content: attr(data-bg); width: 100%; height: 100%; color: rgba(20,20,20,.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; } .tbox { width: 30px; height: 26px; text-align: center; font: normal 16px/26px sans-serif; }
</style>

<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=417613488" autoplay loop></audio>
<div id="rili" title="播放/暂停"></div>
</div>

<script>
{
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#mydiv',
lrcAr: lrcAr,
btn: '#rili',
lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;',
});
};
(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 == today) idx = `<span id="iRed">${idx}</span>`;
output += `<div class="tbox">${idx}</div>`;
});
rili.innerHTML = output;
rili.dataset.bg = `${y}年${m+1}月`;
})();
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

];
}
</script>

马黑黑 发表于 2024-1-3 13:03

本帖最后由马黑黑于 2024-1-3 19:23 编辑

代码（新修正）：<style>
#mydiv { margin: 0 0 0 calc(50% - 681px); width: 1200px; height: 588px; border: 4px solid rgba(0,0,0,.15); border-radius: 10px; background: gray url('https://638183.freep.cn/638183/t24/jpg/nscy.jpg') no-repeat center/cover; box-shadow: 4px 4px 16px rgba(0,0,0,.25); position: relative; display: grid; place-items: center; }
#rili { padding: 6px; top: 10px; max-width: 222px; display: flex; flex-direction: row; flex-wrap: wrap; color: #eee; box-sizing: border-box; user-select: none; cursor: pointer; position: absolute; }
#rili::before { position: absolute; content: attr(data-bg); width: 100%; height: 100%; color: rgba(20,20,20,.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; } .tbox { width: 30px; height: 26px; text-align: center; font: normal 16px/26px sans-serif; }
</style>

<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=417613488" autoplay loop></audio>
<div id="rili" title="播放/暂停"></div>
</div>

<script>
{
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#mydiv',
lrcAr: lrcAr,
btn: '#rili',
lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;',
});
};
(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 == today) idx = `<span id="iRed">${idx}</span>`;
output += `<div class="tbox">${idx}</div>`;
});
rili.innerHTML = output;
rili.dataset.bg = `${y}年${m+1}月`;
})();
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

];
}
</script>

马黑黑 发表于 2024-1-3 13:05

尝试一下将JS代码放入花括号。感谢 @起个网名好难提供的方法！

起个网名好难 发表于 2024-1-3 13:17

马黑黑发表于 2024-1-3 13:05
尝试一下将JS代码放入花括号。感谢 @起个网名好难提供的方法！

欣赏好音画！

这里的日历不能选择不好测试呀。

红影发表于 2024-1-3 14:22

把日历作为按钮，这个有趣。加上年份和月份更好啊，否则不知道是哪年哪个月的啊{:4_173:}

红影发表于 2024-1-3 14:24

这个背景和歌曲很相配，好看。这歌曲是闽南话的歌？
这个风格黑黑很少做呢，眼前一亮的感觉{:4_187:}

红影发表于 2024-1-3 14:25

用日历来串起人间的烟火岁月，这个寓意真好{:4_199:}

红影发表于 2024-1-3 14:27

看着这样的画面，像是看着现实里的某个场景，很真实{:4_204:}

侃大山 发表于 2024-1-3 15:47

好看{:4_204:}

马黑黑 发表于 2024-1-3 16:25

起个网名好难发表于 2024-1-3 13:17
欣赏好音画！

这里的日历不能选择不好测试呀。

这个也不用测试日历的响应问题，主要是测试花括号对。不过不太好理解：花括号对的语义中，独立使用的似乎不好解释。

马黑黑 发表于 2024-1-3 16:25

侃大山发表于 2024-1-3 15:47
好看

谢谢

马黑黑 发表于 2024-1-3 16:25

红影发表于 2024-1-3 14:22
把日历作为按钮，这个有趣。加上年份和月份更好啊，否则不知道是哪年哪个月的啊

它就是当月的、今天的

马黑黑 发表于 2024-1-3 16:26

红影发表于 2024-1-3 14:24
这个背景和歌曲很相配，好看。这歌曲是闽南话的歌？
这个风格黑黑很少做呢，眼前一亮的感觉

你去查一下生祥乐队就知道了

马黑黑 发表于 2024-1-3 16:27

红影发表于 2024-1-3 14:25
用日历来串起人间的烟火岁月，这个寓意真好

这个歌曲不错的

马黑黑 发表于 2024-1-3 16:28

红影发表于 2024-1-3 14:27
看着这样的画面，像是看着现实里的某个场景，很真实

我有更真实的，只是，让人太煽情，不太好

红影发表于 2024-1-3 17:01

马黑黑发表于 2024-1-3 16:25
它就是当月的、今天的

我还是习惯了看到是哪一年哪一月再上面显示出来啊。{:4_173:}
忍不住去试着做一个，感觉之前黑黑的日历里应该能抽出当前的年月，折腾半天没折腾出来。
白折腾半天也难受，想着索性用文字加个上去，只是文字加的不能跟着当前时间变化了。该撤了，等晚上回去再折腾了{:4_173:}

梦油发表于 2024-1-3 17:06

这个画面的建筑很有特色啊。

庶民发表于 2024-1-3 18:21

真的厉害，日历作品

起个网名好难 发表于 2024-1-3 18:40

马黑黑发表于 2024-1-3 16:25
这个也不用测试日历的响应问题，主要是测试花括号对。不过不太好理解：花括号对的语义中，独立使用的似乎 ...

我的理解是加个{}后代码就是块内的了，出了块然后再进入let就又可以定义变量了。

马黑黑 发表于 2024-1-3 19:17

起个网名好难发表于 2024-1-3 18:40
我的理解是加个{}后代码就是块内的了，出了块然后再进入let就又可以定义变量了。

Discuz！的刷新，应该是不同版本有不同的支持度。

页: [1] 2 3 4 5 6 7

花潮论坛's Archiver

日历