今年的美女月历
本帖最后由 起个网名好难 于 2024-2-8 16:04 编辑 <br /><br /><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;font-size:1.2em;}
#selMonth, #prem, #nextm {border:none;background-color:#ddd;}
#inBlk {width:320px;position:absolute;right:10px;bottom:10px;}
</style>
<div id="outBlk">
<div id='inBlk'>
<input type='button' id='prem'value='◄' title='上一个月'/>
<input id="selMonth" type="month" min="2024-01" max="2024-12" title='月份选择'/>
<input type='button' id='nextm' value='►'title='下一个月' />
<div id='calendar'></div>
</div>
</div>
<script>
var sm = document.querySelector('#selMonth');
{
let bkpics = [
"https://s3.bmp.ovh/imgs/2024/01/05/b1e4df02fb672475.jpg",
"https://s3.bmp.ovh/imgs/2024/01/05/b2fe5bce65454e14.jpg",
"https://s3.bmp.ovh/imgs/2024/01/05/9cc3d6f77fc30dff.jpg",
"https://s3.bmp.ovh/imgs/2024/01/05/c74cf391fb05abf1.jpg",
"https://s3.bmp.ovh/imgs/2024/01/05/3ae0c5c36d3af48b.jpg",
"https://s3.bmp.ovh/imgs/2024/01/05/931fe7be1566e5ac.jpg",
"https://s3.bmp.ovh/imgs/2024/01/05/70e65d94dfc458ef.jpg",
"https://s3.bmp.ovh/imgs/2024/01/05/da1a2a25adf49336.jpg",
"https://s3.bmp.ovh/imgs/2024/01/05/31358f217baf4d0f.jpg",
"https://s3.bmp.ovh/imgs/2024/01/05/6dfca2b995dc11b5.jpg",
"https://s3.bmp.ovh/imgs/2024/01/05/84f96b078a4c100b.jpg",
"https://s3.bmp.ovh/imgs/2024/01/05/e8fec3d90d8c1b3b.jpg"
];
let chkMonth = new Date();
let 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(let i = 0; i < first_d; i++) tabStr += '<td> </td>'; // 第一行加上适当的空格
for(let i = 0; i < offIdx; i++,dv++) tabStr += `<td>${dv}</td>`; //
tabStr += '</tr><tr>';
// 其余的行处理
for(let 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),parseInt(ym));
outBlk.style.backgroundImage = `url(${bkpics) - 1]})`;
}
selMonth.onchange = showTable;
showTable();
}
</script> 这个好，能翻月份的。每月一个大美女为伴，太幸福了{:4_173:} 正中下怀！收了{:4_170:} 只有12个美女啊，还没看够{:4_189:} 欣赏难难好帖，这个太赞了{:4_187:} 樵歌 发表于 2024-1-5 10:22
正中下怀！收了
谢谢鼓励支持！
上午好！ 红影 发表于 2024-1-5 10:23
只有12个美女啊，还没看够
这得让老天爷给一年多安排几个月才行啊{:5_106:} 醉美水芙蓉 发表于 2024-1-5 11:31
老师做得真漂亮！谢谢分享！
感谢支持鼓励！
中午好！ 老师出手，必是精品，美女多多，赏心悦目！欣赏学习了！{:4_190:}{:4_199:}{:4_178:} 起个网名好难 发表于 2024-1-5 10:31
谢谢鼓励支持！
上午好！
谢谢美贴{:4_190:} 起个网名好难 发表于 2024-1-5 10:32
这得让老天爷给一年多安排几个月才行啊
哈哈，这个回答必须是满分{:4_189:} 亦是金 发表于 2024-1-5 12:37
老师出手，必是精品，美女多多，赏心悦目！欣赏学习了！
谢谢鼓励支持！
下午好！ 红影 发表于 2024-1-5 13:52
哈哈，这个回答必须是满分
{:4_191:}
{:4_189:} 樵歌 发表于 2024-1-5 13:13
谢谢美贴
{:4_176:}
{:5_108:} 漂亮，欣赏老师好帖{:4_204:} 侃大山 发表于 2024-1-5 17:50
漂亮，欣赏老师好帖
谢谢鼓励支持！ 晚上好！ 请问老师，我是360浏览器，为什么看不到美女图片？
老谟深虑 发表于 2024-1-5 18:11
请问老师，我是360浏览器，为什么看不到美女图片？
看不到图片多半是DNS的问题，即没能正确解析图片地址。 起个网名好难 发表于 2024-1-5 18:13
看不到图片多半是DNS的问题，即没能正确解析图片地址。
咋能解决这个问题呀？谢谢老师！
页:
[1]
2