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

简易万年历

程序员文章站 2022-03-07 19:27:06
...
    

  1. <!DOCTYPE html>
    2. 

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

  3. <head>
    4. 

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

  5.     <title>日历</title>
    6. 

  6. </head>
    7. 

  7. <style>
    8. 

  8.     body{
    9. 

  9.         width: 100%;
    10. 

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

  11.     }
    12. 

  12.     section{
    13. 

  13.         width: 300px;
    14. 

  14.         height: 320px;
    15. 

  15.         margin: 20px auto;
    16. 

  16.         border: 1px solid #ccc;
    17. 

  17.     }
    18. 

  18.     .header{
    19. 

  19.         display: flex;
    20. 

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

  21.         padding: 15px;
    22. 

  22.     }
    23. 

  23.     .header>span:first-child,.header>span:last-child{
    24. 

  24.         line-height: 40px;
    25. 

  25.     }
    26. 

  26.     .container{
    27. 

  27.         width: 100%;
    28. 

  28.         border-spacing: 0;
    29. 

  29.     }
    30. 

  30.     ul,li,p{
    31. 

  31.         padding: 0;
    32. 

  32.         margin: 0;
    33. 

  33.         box-sizing: border-box;
    34. 

  34.         text-align: center;
    35. 

  35.     }
    36. 

  36.     ul{
    37. 

  37.         display: flex;
    38. 

  38.         justify-content: space-around;
    39. 

  39.     }
    40. 

  40.     ul:first-child{
    41. 

  41.         background: #d6d6d6;
    42. 

  42.         padding: 5px;
    43. 

  43.     }
    44. 

  44.     li{
    45. 

  45.         text-align: center;
    46. 

  46.         padding: 5px;
    47. 

  47.         list-style-type: none;
    48. 

  48.         width: 42px;
    49. 

  49.         height: 30px;
    50. 

  50.     }
    51. 

  51.     .active{
    52. 

  52.         color: red;
    53. 

  53.     }
    54. 

  54.     .hover:hover{
    55. 

  55.         border: 1px solid red;
    56. 

  56.         cursor: pointer;
    57. 

  57.     }
    58. 

  58.     #date{
    59. 

  59.         display: flex;
    60. 

  60.         justify-content: start;
    61. 

  61.         flex-wrap: wrap;
    62. 

    63. 

  63.     }
    64. 

    65. 

  65. </style>
    66. 

  66. <body>
    67. 

  67. <section>
    68. 

  68.     <div class="header">
    69. 

  69.         <span id="pre">上一月</span>
    70. 

  70.         <span>
    71. 

  71.             <p id="year"></p>
    72. 

  72.             <p id="month"></p>
    73. 

  73.         </span>
    74. 

  74.         <span id="next">下一月</span>
    75. 

  75.     </div>
    76. 

  76.     <div class="container">
    77. 

  77.         <ul>
    78. 

  78.             <li>日</li>
    79. 

  79.             <li>一</li>
    80. 

  80.             <li>二</li>
    81. 

  81.             <li>三</li>
    82. 

  82.             <li>四</li>
    83. 

  83.             <li>五</li>
    84. 

  84.             <li>六</li>
    85. 

  85.         </ul>
    86. 

  86.         <ul id="date">
    87. 

  87.         </ul>
    88. 

  88.     </div>
    89. 

    90. 

    91. 

    92. 

    93. 

  93. </section>
    94. 

  94. <script>
    95. 

  95.     var date = new Date();
    96. 

  96.     add()
    97. 

  97.     function add(){
    98. 

  98.         var arr = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
    99. 

    100. 

  100.         var year = date.getFullYear();  //获取系统年份
    101. 

  101.         var month = date.getMonth();  //获取系统月份
    102. 

  102.         var now = date.getDate();  //今天的日期
    103. 

  103.         var xingQi = new Date(year,month,1).getDay(); //当月1号是星期几
    104. 

  104.         var days = getDate(year,month-1); //当月天数
    105. 

  105.         console.log(xingQi);
    106. 

    107. 

  107.         document.getElementById('year').innerText = year+ '年';
    108. 

  108.         document.getElementById('month').innerText = arr[month];
    109. 

  109.         var dateObj = document.getElementById('date');
    110. 

    111. 

  111.         function getDate(year,month){
    112. 

  112.             var d = new Date(year,month,0);
    113. 

  113.             return d.getDate();
    114. 

  114.         }
    115. 

    116. 

    117. 

  117.         var html =''
    118. 

  118.         for (let i =0;i<xingQi;i++){
    119. 

  119.             html += '<li></li>'
    120. 

  120.         }
    121. 

  121.         for (let i=1;i<=days;i++){
    122. 

  122.             if (i == now){
    123. 

  123.                 html += "<li class='active'>" + i + "</li>"
    124. 

  124.             }
    125. 

  125.             else {
    126. 

  126.                 html += '<li class="hover">' + i + '</li>';
    127. 

  127.             }
    128. 

  128.         }
    129. 

  129.         document.getElementById('date').innerHTML=html;
    130. 

    131. 

  131.     }
    132. 

  132.     document.getElementById('pre').onclick=function(){
    133. 

  133.         date.setMonth(date.getMonth()-1);
    134. 

  134.         add();
    135. 

  135.     };
    136. 

    137. 

  137.     document.getElementById('next').onclick=function(){
    138. 

  138.         date.setMonth(date.getMonth()+1);
    139. 

  139.         add();
    140. 

  140.     }
    141. 

    142. 

    143. 

  143. </script>
    144. 

    145. 

  145. </body>
    146. 

  146. </html>
    147.

上一篇： python如何生成随机数字

下一篇： 通过类名获取所有元素的方法

推荐阅读