欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

简易 javascript 日历

程序员文章站 2023-12-21 17:29:22
...

简易 javascript 日历

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Title</title>
    6. 

  6.     <style>
    7. 

  7.         body, ul, li {
    8. 

  8.             margin: 0;
    9. 

  9.             padding: 0;
    10. 

  10.             box-sizing: border-box;
    11. 

  11.         }
    12. 

    13. 

  13.         .calendar {
    14. 

  14.             margin: 10px auto;
    15. 

  15.             border: 1px solid;
    16. 

  16.             width: 21rem;
    17. 

  17.         }
    18. 

    19. 

  19.         .calendar > .header {
    20. 

  20.             display: flex;
    21. 

  21.             justify-content: space-between;
    22. 

  22.             align-items: center;
    23. 

  23.             margin: .5rem;
    24. 

  24.         }
    25. 

    26. 

  26.         .calendar > .header > .middle {
    27. 

  27.             text-align: center;
    28. 

  28.         }
    29. 

    30. 

  30.         .calendar > ul {
    31. 

  31.             list-style: none;
    32. 

  32.             display: flex;
    33. 

  33.             margin-bottom: .5rem;
    34. 

  34.         }
    35. 

    36. 

  36.         .calendar > ul > li {
    37. 

  37.             flex-basis: 3rem;
    38. 

  38.             padding: .5rem;
    39. 

  39.             text-align: center;
    40. 

  40.         }
    41. 

    42. 

  42.         .calendar > ul.week {
    43. 

  43.             background-color: darkgray;
    44. 

  44.         }
    45. 

    46. 

  46.         .calendar > ul.date {
    47. 

  47.             flex-wrap: wrap;
    48. 

  48.         }
    49. 

    50. 

  50.         .calendar > ul.date > li.active {
    51. 

  51.             color: red;
    52. 

  52.         }
    53. 

    54. 

  54.     </style>
    55. 

  55. </head>
    56. 

  56. <body>
    57. 

    58. 

  58. <div class="calendar">
    59. 

  59.     <div class="header">
    60. 

  60.         <a class="prev" href="javascript:" title="上一月">上一月</a>
    61. 

  61.         <div class="middle">
    62. 

  62.             <div class="year"></div>
    63. 

  63.             <div class="month"></div>
    64. 

  64.         </div>
    65. 

  65.         <a class="next" href="javascript:" title="下一月">下一月</a>
    66. 

  66.     </div>
    67. 

  67.     <ul class="week">
    68. 

  68.         <li>日</li>
    69. 

  69.         <li>一</li>
    70. 

  70.         <li>二</li>
    71. 

  71.         <li>三</li>
    72. 

  72.         <li>四</li>
    73. 

  73.         <li>五</li>
    74. 

  74.         <li>六</li>
    75. 

  75.     </ul>
    76. 

  76.     <ul class="date"></ul>
    77. 

  77. </div>
    78. 

    79. 

  79. <script>
    80. 

  80.     var date = new Date();
    81. 

    82. 

  82.     function calendar() {
    83. 

  83.         var year = date.getFullYear(),
    84. 

  84.             month = date.getMonth(),
    85. 

  85.             week = date.getDay(),
    86. 

  86.             day = date.getDate(),
    87. 

  87.             monthStr = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'][month],
    88. 

  88.             weekDays = new Date(year, month, 1).getDay(),
    89. 

  89.             days = new Date(year, month + 1, 0).getDate();
    90. 

    91. 

  91.         // 插入年
    92. 

  92.         document.getElementsByClassName('year')[0].innerHTML = year;
    93. 

  93.         // 插入月
    94. 

  94.         document.getElementsByClassName('month')[0].innerHTML = monthStr;
    95. 

  95.         // 插入日
    96. 

  96.         var dateStr = '', style;
    97. 

  97.         for (var i = 0; i < weekDays; i++) dateStr += `<li></li>`;
    98. 

    99. 

  99.         for (var i = 1; i <= days; i++) {
    100. 

  100.             style = '';
    101. 

  101.             if (i === new Date().getDate() && year === new Date().getFullYear() && month === new Date().getMonth()) {
    102. 

  102.                 style = ' class="active"';
    103. 

  103.             }
    104. 

  104.             dateStr += `<li${style}>${i}</li>`;
    105. 

  105.         }
    106. 

  106.         document.getElementsByClassName('date')[0].innerHTML = dateStr;
    107. 

  107.     }
    108. 

    109. 

  109.     window.onload = calendar;
    110. 

  110.     document.getElementsByClassName('prev')[0].onclick = function () {
    111. 

  111.         date.setMonth(date.getMonth() - 1);
    112. 

  112.         calendar();
    113. 

  113.     }
    114. 

  114.     document.getElementsByClassName('next')[0].onclick = function () {
    115. 

  115.         date.setMonth(date.getMonth() + 1);
    116. 

  116.         calendar();
    117. 

  117.     }
    118. 

  118. </script>
    119. 

    120. 

  120. </body>
    121. 

  121. </html>
    122.

简易 javascript 日历

上一篇：

下一篇：

推荐阅读