美女音乐月历

月婵

欣赏美女音乐月历好制作！

筱亭

制作很有特色，每个月都有，是个制图高手！欢迎新朋友

红英

<style>
#calendar td        {text-align:center;font-size:1.2em;font-weight:bold;color:white;}
#calendar table        {width:100%;}
#calendar th        {color:skyblue;font:bold 1.5em '\5fae\8f6f\96c5\9ed1';}
#calendar        {width:90%;padding:8px;margin:auto;}
#outBlk        {width:640px;height:850px; 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;}
#selMonth {padding:10px;margin:2px;}
#selMonth, #prem, #nextm {border:none;background-color:lightgray;}
#inBlk        {width:320px;position:absolute;right:10px;bottom:10px;font-size:13px;}
</style>

<div id="outBlk">
        <div id='inBlk'>
                <input type='button' id='prem'value='&#9668' title='上一个月'/>&nbsp;
                <input id="selMonth" type="month" min="2024-01" max="2024-12" />
                &nbsp;<input type='button' id='nextm' value='&#9658'  title='下一个月' />
                <div id='calendar'></div>
        </div>
</div>

<script>
var bkpics = [
"https://s11.ax1x.com/2024/01/08/pFp9C4I.png",
"https://s11.ax1x.com/2024/01/08/pFp9iCt.png",
"https://s11.ax1x.com/2024/01/09/pFpV8HK.jpg",
"https://s11.ax1x.com/2024/01/08/pFSUQSI.jpg",
"https://s11.ax1x.com/2024/01/08/pFSyAX9.jpg",
"https://s11.ax1x.com/2024/01/08/pFS6DPK.jpg",
"https://s11.ax1x.com/2024/01/08/pFS6qqs.jpg",
"https://s11.ax1x.com/2024/01/08/pFSx4nH.jpg",
"https://s11.ax1x.com/2024/01/08/pFSxq9f.jpg",
"https://s11.ax1x.com/2024/01/08/pFSxzHs.jpg",
"https://s11.ax1x.com/2024/01/09/pFpVJAO.jpg",
"https://s11.ax1x.com/2024/01/09/pFpVa3d.jpg"
];
var chkMonth = new Date();
var cur_month = chkMonth.getMonth()+1;
selMonth.defaultValue = `${chkMonth.getFullYear()}-${cur_month < 10 ? '0'+cur_month :''+cur_month}`;

prem.onclick = function()        {
        selMonth.stepDown(1);
        showTable();
}
nextm.onclick = function()        {
        selMonth.stepUp(1);
        showTable();
}
selMonth.oninput = function(e)        {
        if('' === e.target.value) selMonth.value = '1970-01';
        else        return false;
}

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 ym = selMonth.value.split('-');
        mkTab(parseInt(ym[0]),parseInt(ym[1]));
        outBlk.style.backgroundImage = `url(${bkpics[parseInt(ym[1]) - 1]})`;
}
selMonth.onchange = showTable;
showTable();
</script>

<br /><br /><br><br>
<video src="https://music.163.com/song/media/outer/url?id=229779.mp3" width="1" height="1" controls="" autoplay=""></td></tr>

红英

在线编辑器看了显示正确。

老钟

老师制作的美女音乐月历很美，很实用，点赞！