也做个练习：月历
本帖最后由 起个网名好难 于 2024-1-1 05:12 编辑 <br /><br />功能不完善的程序片段，只为练习下 type="month"<br><style>
#calendar td {text-align:center;font-size:1.2em;font-weight:bold;}
#calendar table {width:100%;}
#calendar th {color:brown;font:bold 1.5em '微软雅黑';}
#calendar {width:90%;padding:8px;margin:auto;}
#outBlk {width:320px;background-color:#ddd;margin:auto;overflow:hidden;border:thick gray solid;border-radius:24px;padding:16px 12px;text-align:center;}
#selMonth {padding:10px;margin:2px;}
</style>
<div id="outBlk">
<input type='button' id='prem'value='◄' title='上一个月'/>
<input id="selMonth" type="month" min="1900-01" max="2100-01" />
<input type='button' id='nextm' value='►'title='下一个月'/>
　 <input type='button' id='tday' value='今天' />
<div id='calendar'></div>
</div>
<script>
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),parseInt(ym));
}
selMonth.onchange = showTable;
tday.onclick = function() {
let cueday = new Date();
let curMonth = cueday.getMonth() + 1;
selMonth.value = `${cueday.getFullYear()}-${curMonth < 10 ? '0' +curMonth:'' + curMonth}`;
showTable();
let cday = cueday.getDate();
let tds = calendar.querySelectorAll("td");
tds.forEach(function(ele,idx) {
if(ele.innerHTML == cday) ele.style.color = 'red';
});
}
showTable();
</script> 本帖最后由 起个网名好难 于 2023-12-30 21:50 编辑
<style>
#calendar td {text-align:center;font-size:1.2em;font-weight:bold;}
#calendar table {width:100%;}
#calendar th {color:brown;font:bold 1.5em '微软雅黑';}
#calendar {width:90%;padding:8px;margin:auto;}
#outBlk {width:320px;background-color:#ddd;margin:auto;overflow:hidden;border:thick black solid;border-radius:24px;padding:16px 12px;}
#selMonth {padding:10px;margin:2px;}
</style>
<div id="outBlk">
<input type='button' id='prem'value='◄' title='上一个月'/>
<input id="selMonth" type="month" min="1900-01" max="2100-01" />
<input type='button' id='nextm' value='►'title='下一个月'/>
　 <input type='button' id='tday' value='今天' />
<div id='calendar'></div>
</div>
<script>
var chkMonth = new Date();
selMonth.defaultValue = `${chkMonth.getFullYear()}-${chkMonth.getMonth()+1}`;
prem.onclick = function() {
selMonth.stepDown(1);
showTable();
}
nextm.onclick = function() {
selMonth.stepUp(1);
showTable();
}
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),parseInt(ym));
}
selMonth.onchange = showTable;
tday.onclick = function() {
let cueday = new Date();
selMonth.value = `${cueday.getFullYear()}-${cueday.getMonth()+1}`;
showTable();
let cday = cueday.getDate();
let tds = calendar.querySelectorAll("td");
tds.forEach(function(ele,idx) {
if(ele.innerHTML == cday) ele.style.color = 'red';
});
}
showTable();
</script>
难难好厉害，这些我连看都看不懂，你却也可以做出来呢，必须点个大大的赞{:4_199:} 我看黑黑那个可以高亮当天，这个不可以么？{:4_204:} 红影 发表于 2023-12-30 10:42
难难好厉害，这些我连看都看不懂，你却也可以做出来呢，必须点个大大的赞
谢谢支持！
因为是做练习没加注释，加上注释就很容易看懂了。 起个网名好难 发表于 2023-12-30 11:23
谢谢支持！
因为是做练习没加注释，加上注释就很容易看懂了。
难难还能做这样的练习，很厉害呢。我只会套用，别的都不会{:4_173:} 红影 发表于 2023-12-30 11:46
难难还能做这样的练习，很厉害呢。我只会套用，别的都不会
套用也很厉害的。 醉美水芙蓉 发表于 2023-12-30 12:08
谢谢老师分享源码！
谢谢支持！
只是个不完善的练习而已。 起个网名好难 发表于 2023-12-30 12:14
套用也很厉害的。
哪里啊，还是自己能写代码更厉害呢{:4_199:} 欣赏欣赏 加了分变1月份了，日子没有了 世外桃源 发表于 2023-12-30 14:34
欣赏欣赏
谢谢支持鼓励。 世外桃源 发表于 2023-12-30 14:34
加了分变1月份了，日子没有了
不太明白你说的问题{:5_102:} 红影 发表于 2023-12-30 12:59
哪里啊，还是自己能写代码更厉害呢
{:4_191:}{:4_176:}{:4_190:}{:4_180:} 难难也是厉害的，制作的漂亮{:4_199:} 小辣椒 发表于 2023-12-30 16:22
难难也是厉害的，制作的漂亮
谢谢支持鼓励！
就是个练习而已 老师，给你加了分以后，日历只能看到月份，看不到日期了。
老谟深虑 发表于 2023-12-30 16:41
老师，给你加了分以后，日历只能看到月份，看不到日期了。
谢谢告知，我想法试试。 起个网名好难 发表于 2023-12-30 16:08
问好难难，周六快乐{:4_187:}
页:
[1]
2