也做个练习：月历

起个网名好难

功能不完善的程序片段，只为练习下 type="month"

    　

起个网名好难

1. <style>
   
2. #calendar td        {text-align:center;font-size:1.2em;font-weight:bold;}
   
3. #calendar table        {width:100%;}
   
4. #calendar th        {color:brown;font:bold 1.5em '微软雅黑';}
   
5. #calendar        {width:90%;padding:8px;margin:auto;}
   
6. #outBlk        {width:320px;background-color:#ddd;margin:auto;overflow:hidden;border:thick black solid;border-radius:24px;padding:16px 12px;}
   
7. #selMonth {padding:10px;margin:2px;}
   
8. </style>
   
9. 
   
10. <div id="outBlk">
    
11. <input type='button' id='prem'value='&#9668' title='上一个月'/>&nbsp;
    
12. <input id="selMonth" type="month" min="1900-01" max="2100-01" />
    
13. &nbsp;<input type='button' id='nextm' value='&#9658'  title='下一个月'/>
    
14. &#X3000; <input type='button' id='tday' value='今天' />
    
15. <div id='calendar'></div>
    
16. </div>
    
17. 
    
18. <script>
    
19. 
    
20. var chkMonth = new Date();
    
21. selMonth.defaultValue = `${chkMonth.getFullYear()}-${chkMonth.getMonth()+1}`;
    
22. 
    
23. prem.onclick = function()        {
    
24.         selMonth.stepDown(1);
    
25.         showTable();
    
26. }
    
27. nextm.onclick = function()        {
    
28.         selMonth.stepUp(1);
    
29.         showTable();
    
30. }
    
31. 
    
32. 
    
33. function mkTab(yv, mv)        {        // 构造月历表格
    
34.         let tmp_d = new Date(yv, mv-1, 1);
    
35.         let first_d = tmp_d.getDay();        //        这个月的第一天是星期几
    
36.         tmp_d = new Date(yv, mv, 0);
    
37.         let last_d = tmp_d.getDate()        //        这个月有多少天
    
38.        
    
39.         //        表头是不变的
    
40.         let tabStr = "<table><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";
    
41.         //        第一行需特殊处理
    
42.         tabStr += '<tr>';
    
43.         let dv = 1, offIdx = 7 - first_d;
    
44.         for(i = 0; i < first_d; i++)        tabStr += '<td>　</td>';        // 第一行加上适当的空格
    
45.         for(i = 0; i < offIdx; i++,dv++) tabStr += `<td>${dv}</td>`;        //       
    
46.         tabStr += '</tr><tr>';
    
47.         //        其余的行处理
    
48.         for(i = dv; i <= last_d; i++)        {
    
49.                 tabStr += `<td>${i}</td>`;
    
50.                 if((i-offIdx) % 7 == 0)        tabStr += '</tr><tr>';        //        七个日子就换一行
    
51.         }
    
52.         tabStr += "</tr></table>"
    
53.         calendar.innerHTML = tabStr;
    
54. }
    
55. function showTable()        {
    
56.         let ym = selMonth.value.split('-');
    
57.         mkTab(parseInt(ym[0]),parseInt(ym[1]));
    
58. }
    
59. selMonth.onchange = showTable;
    
60. tday.onclick = function()        {
    
61.         let cueday = new Date();
    
62.         selMonth.value = `${cueday.getFullYear()}-${cueday.getMonth()+1}`;
    
63.         showTable();
    
64.         let cday = cueday.getDate();
    
65.         let tds = calendar.querySelectorAll("td");
    
66.        
    
67.         tds.forEach(function(ele,idx)        {
    
68.                 if(ele.innerHTML == cday)         ele.style.color = 'red';
    
69.         });
    
70. }
    
71. 
    
72. showTable();
    
73. </script>

复制代码

红影

难难好厉害，这些我连看都看不懂，你却也可以做出来呢，必须点个大大的赞

红影

我看黑黑那个可以高亮当天，这个不可以么？

起个网名好难

红影 发表于 2023-12-30 10:42
难难好厉害，这些我连看都看不懂，你却也可以做出来呢，必须点个大大的赞

谢谢支持！

因为是做练习没加注释，加上注释就很容易看懂了。

红影

起个网名好难 发表于 2023-12-30 11:23
谢谢支持！

因为是做练习没加注释，加上注释就很容易看懂了。

难难还能做这样的练习，很厉害呢。我只会套用，别的都不会

起个网名好难

红影 发表于 2023-12-30 11:46
难难还能做这样的练习，很厉害呢。我只会套用，别的都不会

套用也很厉害的。

起个网名好难

醉美水芙蓉 发表于 2023-12-30 12:08
谢谢老师分享源码！

谢谢支持！

只是个不完善的练习而已。

红影

起个网名好难 发表于 2023-12-30 12:14
套用也很厉害的。

哪里啊，还是自己能写代码更厉害呢

世外桃源

欣赏欣赏

世外桃源

加了分变1月份了，日子没有了

起个网名好难

世外桃源 发表于 2023-12-30 14:34
欣赏欣赏

谢谢支持鼓励。

起个网名好难

世外桃源 发表于 2023-12-30 14:34
加了分变1月份了，日子没有了

不太明白你说的问题

起个网名好难

红影 发表于 2023-12-30 12:59
哪里啊，还是自己能写代码更厉害呢

小辣椒

难难也是厉害的，制作的漂亮

起个网名好难

小辣椒 发表于 2023-12-30 16:22
难难也是厉害的，制作的漂亮

谢谢支持鼓励！

就是个练习而已

老谟深虑

          老师，给你加了分以后，日历只能看到月份，看不到日期了。

起个网名好难

老谟深虑 发表于 2023-12-30 16:41
老师，给你加了分以后，日历只能看到月份，看不到日期了。

谢谢告知，我想法试试。

红影

起个网名好难 发表于 2023-12-30 16:08

问好难难，周六快乐