论坛 › 动画音画 › 美女组团来了 --- 有音乐的月历

起个网名好难 发表于 2024-1-6 20:12

美女组团来了 --- 有音乐的月历

本帖最后由 起个网名好难 于 2024-1-8 08:12 编辑 <br /><br /><style>
#calendar td        {text-align:center;font-size:1.1em;font-weight:bold;color:transparent;-webkit-background-clip:text;
background-image:linear-gradient(30deg,hsl(30,100%,50%),hsl(90,100%,50%),hsl(150,100%,50%),hsl(210,100%,50%),hsl(270,100%,90%));}
#calendar table        {width:100%;}
#calendar th        {color:skyblue;font:bold 1.4em '\5fae\8f6f\96c5\9ed1';}
#calendar        {width:90%;padding:8px;margin:auto;}
#outBlk        {width:640px;height:900px; margin:auto;overflow:hidden;position:relative;padding:16px 12px;text-align:center;border-radius:32px;
        background:darkgray url(https://s3.bmp.ovh/imgs/2024/01/05/b1e4df02fb672475.jpg) no-repeat center/cover;box-shadow:2px 2px 8px black;}
#choice_month {padding:2px;margin:2px;border:none;font-weight:800;font-size:1.1em;color:red;background-color:transparent;}
#prevm, #nextm {border:none;background-color:transparent;color:red;font-size:1.2em;}
#inBlk        {width:320px;position:absolute;right:10px;bottom:10px;}
#sname        {position:absolute;left:20px;top:60px;font:bold 36px 楷体;color:blue;writing-mode: vertical-rl;cursor:pointer;text-shadow: 2px 2px 0 #2260b1}
</style>

<div id="outBlk">
        <span id='sname' title="音乐启停控制"></span>
        <div id='inBlk'>
                <input type='button' id='prevm'value='&#9668' title='上一个月'/>&nbsp;
                <select id='choice_month' title='请选择'></select>
               
                <!-- input id="selMonth" type="month" min="2024-01" max="2024-12" / -->
                &nbsp;<input type='button' id='nextm' value='&#9658'title='下一个月' />
                <div id='calendar'></div>
                <audio id="bkvid" src="" loop autoplay ></audio>
        </div>
</div>

<script>
{
let bkpics = [
{"songName":"高山流水",   "picUrl":"https://s3.bmp.ovh/imgs/2024/01/06/44ceb7c452026fc9.jpg", "songUrl":"https://mp3.t57.cn:7087/kwlink_d.php?id=238363"},
{"songName":"梅花三弄",   "picUrl":"https://s3.bmp.ovh/imgs/2024/01/06/7629998e934e361b.jpg", "songUrl":"https://mp3.t57.cn:7087/kwlink_d.php?id=51502118"},
{"songName":"春江花月夜", "picUrl":"https://s3.bmp.ovh/imgs/2024/01/06/cbf45a1b316b6946.jpg", "songUrl":"https://mp3.t57.cn:7087/kwlink_d.php?id=275888791"},
{"songName":"汉宫秋月",   "picUrl":"https://s3.bmp.ovh/imgs/2024/01/06/f20cb4319e0b8fe3.jpg", "songUrl":"https://mp3.t57.cn:7087/kwlink_d.php?id=556842"},
{"songName":"阳春白雪",   "picUrl":"https://s3.bmp.ovh/imgs/2024/01/06/991078ab085b0723.jpg", "songUrl":"https://mp3.t57.cn:7087/kwlink_d.php?id=212525054"},
{"songName":"渔樵问答",   "picUrl":"https://s3.bmp.ovh/imgs/2024/01/06/6c666389f4a5f661.jpg", "songUrl":"https://mp3.t57.cn:7087/kwlink_d.php?id=253468756"},
{"songName":"胡笳十八拍", "picUrl":"https://s3.bmp.ovh/imgs/2024/01/06/94f2d284826e5396.jpg", "songUrl":"https://mp3.t57.cn:7087/kwlink_d.php?id=216069215"},
{"songName":"广陵散",   "picUrl":"https://s3.bmp.ovh/imgs/2024/01/06/3b80a48c831a6fd8.jpg", "songUrl":"https://mp3.t57.cn:7087/kwlink_d.php?id=234243"},
{"songName":"平沙落雁",   "picUrl":"https://s3.bmp.ovh/imgs/2024/01/06/98f175af90e3d707.jpg", "songUrl":"https://mp3.t57.cn:7087/kwlink_d.php?id=183757506"},
{"songName":"十面埋伏",   "picUrl":"https://s3.bmp.ovh/imgs/2024/01/06/e0e022e2571fa0ce.jpg", "songUrl":"https://mp3.t57.cn:7087/kwlink_d.php?id=237303655"},
{"songName":"云水禅心",   "picUrl":"https://s3.bmp.ovh/imgs/2024/01/06/956fae41ba11bf60.jpg", "songUrl":"https://mp3.t57.cn:7087/kwlink_d.php?id=6647870"},
{"songName":"凤求凰",   "picUrl":"https://s3.bmp.ovh/imgs/2024/01/06/56edaf6d4118075c.jpg", "songUrl":"https://mp3.t57.cn:7087/kwlink_d.php?id=155892136"}
];

let chkMonth = new Date();
let cur_month = chkMonth.getMonth()+1;
let curYear = chkMonth.getFullYear();

        for(let i=1; i <=12; i++)        {
                let opt = document.createElement('option');
                opt.value = i ;
                opt.innerHTML = curYear + ' 年 ' + opt.value + ' 月';
                if(i == cur_month) opt.selected = 'selcted';
                choice_month.appendChild(opt);
        }

prevm.onclick = function()        {
        let chIdx = choice_month.selectedIndex;
        chIdx--; chIdx >= 0 ? chIdx : chIdx = 11;
        choice_month.options.selected = true;
        showTable();
}
nextm.onclick = function()        {
        let chIdx = choice_month.selectedIndex;
        chIdx++; chIdx > 11 ? chIdx=0 : chIdx;
        choice_month.options.selected = true;
        showTable();
}

sname.onclick = function()        {
        if(bkvid.paused) bkvid.play();
        else        bkvid.pause();
}

function mkTab(yv, mv)        {        // 构造月历表格
        let tmp_d = new Date(yv, mv-1, 1);
        let first_d = tmp_d.getDay();        //        这个月的第一天是星期几
        tmp_d = new Date(yv, mv, 0);
        let last_d = tmp_d.getDate()        //        这个月有多少天
       
        //        表头是不变的
        let tabStr = "<table><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";
        //        第一行需特殊处理
        tabStr += '<tr>';
        let dv = 1, offIdx = 7 - first_d;
        for(i = 0; i < first_d; i++)        tabStr += '<td>　</td>';        // 第一行加上适当的空格
        for(i = 0; i < offIdx; i++,dv++) tabStr += `<td>${dv}</td>`;        //       
        tabStr += '</tr><tr>';
        //        其余的行处理
        for(i = dv; i <= last_d; i++)        {
                tabStr += `<td>${i}</td>`;
                if((i-offIdx) % 7 == 0)        tabStr += '</tr><tr>';        //        七个日子就换一行
        }
        tabStr += "</tr></table>"
        calendar.innerHTML = tabStr;
}
function showTable()        {
        let chIdx = choice_month.selectedIndex;
        mkTab(curYear, chIdx+1);
        bkvid.src = `${bkpics.songUrl}`;
        outBlk.style.backgroundImage = `url(${bkpics.picUrl})`;
        sname.innerHTML = `${bkpics.songName}`;
}
choice_month.onchange = showTable;
showTable();
}
</script>

起个网名好难 发表于 2024-1-6 20:12

1.input type='month' 火狐浏览器不支持，改用select option 替代；
2. 樵歌网友希望每日一歌，这个恐怕工作量有些大，勉强每月一歌凑合下；
3. 如果画面出来后没有音乐，点下左上角的曲名可以启停音乐。

醉美水芙蓉 发表于 2024-1-6 20:39

亦是金 发表于 2024-1-6 20:44

欣赏老师精美月历帖！欣赏学习了！{:4_190:}

樵歌 发表于 2024-1-6 20:48

哇里个塞，太漂亮，太有形了，简直个个都是国民美女。精神上先喜欢一下{:4_173:}

樵歌 发表于 2024-1-6 20:48

@小辣椒 这个高亮啥子颜色哇？

樵歌 发表于 2024-1-6 20:50

起个网名好难 发表于 2024-1-6 20:12
1.input type='month' 火狐浏览器不支持，改用select option 替代；
2. 樵歌网友希望每日一歌，这个恐怕 ...

随便一说，你就做出来了，太漂亮，人儿太美丽冻人了{:4_173:}看样都像江南的美女{:4_189:}

山人 发表于 2024-1-6 20:54

每日一歌，需要 365 + 1 支歌曲和同样数量的美女。美女好找，歌曲难求 @樵歌 不要太贪心{:4_170:}

红影 发表于 2024-1-6 21:06

樵歌 发表于 2024-1-6 20:48
@小辣椒 这个高亮啥子颜色哇？

绿色的{:4_173:}

红影 发表于 2024-1-6 21:07

这个好漂亮啊，无论是乐曲还是美女的风格，都很美。太赞了{:4_199:}

红影 发表于 2024-1-6 21:08

这个不但能左右箭头可以选月份，还有下拉键可以直接选。厉害。
欣赏难难好帖{:4_199:}

小辣椒 发表于 2024-1-6 21:33

樵歌 发表于 2024-1-6 20:48
@小辣椒 这个高亮啥子颜色哇？

樵哥哥，音画板现在緑的高亮，以前曾经是紫红的，现在大众化是緑的了{:4_189:}

小辣椒 发表于 2024-1-6 21:34

难难高手的，这个制作很漂亮的{:4_199:}

小辣椒 发表于 2024-1-6 21:35

樵歌 发表于 2024-1-6 20:48
哇里个塞，太漂亮，太有形了，简直个个都是国民美女。精神上先喜欢一下

樵哥哥你这个老革命也是被美女诱惑了{:4_170:}

起个网名好难 发表于 2024-1-6 22:23

醉美水芙蓉 发表于 2024-1-6 20:39
谢谢老师分享精美音画！

谢谢鼓励支持！

https://p9.itc.cn/images01/20210815/f78308625f164e8aa07f367b53865299.gif

起个网名好难 发表于 2024-1-6 22:23

亦是金 发表于 2024-1-6 20:44
欣赏老师精美月历帖！欣赏学习了！

谢谢鼓励支持！

https://p9.itc.cn/images01/20210815/f78308625f164e8aa07f367b53865299.gif

起个网名好难 发表于 2024-1-6 22:24

樵歌 发表于 2024-1-6 20:48
哇里个塞，太漂亮，太有形了，简直个个都是国民美女。精神上先喜欢一下

谢谢鼓励支持！

https://p9.itc.cn/images01/20210815/f78308625f164e8aa07f367b53865299.gif

起个网名好难 发表于 2024-1-6 22:25

樵歌 发表于 2024-1-6 20:50
随便一说，你就做出来了，太漂亮，人儿太美丽冻人了看样都像江南的美女

布置的任务必须完成呀{:5_106:}

起个网名好难 发表于 2024-1-6 22:26

红影 发表于 2024-1-6 21:07
这个好漂亮啊，无论是乐曲还是美女的风格，都很美。太赞了

谢谢鼓励支持！

https://img.lwuxueyong.cn/uploads/allimg/201226/111I121I-3.jpg

起个网名好难 发表于 2024-1-6 22:27

小辣椒 发表于 2024-1-6 21:34
难难高手的，这个制作很漂亮的

谢谢鼓励支持！

https://img.lwuxueyong.cn/uploads/allimg/201226/111I121I-3.jpg

查看完整版本: 美女组团来了 --- 有音乐的月历