日历

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

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

马黑黑 · 发表于 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 = [
[1.93,"作词 : 钟永丰",2.7],
[4.67,"作曲 : 林生祥",1.6],
[6.26,"歌手 : 生祥乐队",12.8],
[19.08,"真煞猛，阿弟牯",3.9],
[23.44,"每朝晨穿家過戶",3.6],
[27.49,"擘忒鄰舍壁頂高",4.0],
[31.7,"昨比日个日曆紙",3.6],
[36.07,"阿弟牯，好讀書",4.0],
[40.3,"敬字惜紙阿公度",4.1],
[44.89,"無彩發燒醫生遠",3.9],
[49.03,"毋使拚頭名硬讀",4.4],
[56.85,"長有伯，阿龍嫂",5.9],
[65.47,"專汝等放閒來莫去擘",6.0],
[74.21,"阿弟牯佢是會蹬哭",6.8],
[82.8,"再撖日曆對半擘",5.3],
[124.62,"林仔邊，石化廠",4.0],
[129.04,"政府月給掛保障",3.9],
[133.28,"滿叔報名阿姊考",3.9],
[137.5,"夥房子弟腥出庄",3.6],
[141.95,"真煞猛，阿弟牯",3.9],
[146.4,"每朝晨穿家過户",3.8],
[150.57,"擘忒鄰舍壁頂高",4.1],
[154.97,"昨比日个日曆紙",4.1],
[162.78,"阿弟惜，阿弟乖",7.0],
[171.33,"他人東西莫賤到",6.1],
[179.91,"日曆擘到紙紅紅",7.0],
[188.63,"聊假歸來點指哢哢",6.1],
[197.28,"阿弟惜，阿弟乖",6.3],
[205.79,"他人東西莫賤到",7.0],
[214.46,"日曆擘到紙紅紅",7.1],
[223.16,"聊假歸來點指哢哢",5.2]
];
}
</script>