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

JavaScript实现简单的日历

程序员文章站 2023-12-21 18:34:29
...
    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3.     <head>
    4. 

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

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

  6.         <style type="text/css">
    7. 

  7.             .evrday {
    8. 

  8.                 width: 14%;
    9. 

  9.                 float: left;
    10. 

  10.             }
    11. 

    12. 

  12.             #calendar {
    13. 

  13.                 width: 400px;
    14. 

  14.                 margin: auto;
    15. 

  15.             }
    16. 

    17. 

  17.             button {
    18. 

  18.                 width: 25%;
    19. 

  19.                 height: 40px;
    20. 

  20.                 float: left;
    21. 

  21.             }
    22. 

    23. 

  23.             div {
    24. 

  24.                 margin-top: 10px;
    25. 

  25.                 margin-bottom: 5px;
    26. 

  26.                 text-align: center;
    27. 

  27.             }
    28. 

    29. 

  29.             #month {
    30. 

  30.                 width: 50%;
    31. 

  31.                 float: left;
    32. 

  32.             }
    33. 

  33.         </style>
    34. 

  34.     </head>
    35. 

  35.     <body onLoad="showday()">
    36. 

  36.         <div id="calendar">
    37. 

  37.             <div>
    38. 

  38.                 <button onClick="shang()">上个月</button>
    39. 

  39.                 <div id="month"></div>
    40. 

  40.                 <button onClick="next()">下个月</button>
    41. 

  41.             </div>
    42. 

  42.             <div>
    43. 

  43.                 <div class="evrday">日</div>
    44. 

  44.                 <div class="evrday">一</div>
    45. 

  45.                 <div class="evrday">二</div>
    46. 

  46.                 <div class="evrday">三</div>
    47. 

  47.                 <div class="evrday">四</div>
    48. 

  48.                 <div class="evrday">五</div>
    49. 

  49.                 <div class="evrday">六</div>
    50. 

  50.             </div>
    51. 

    52. 

  52.             <div id="day"></div>
    53. 

  53.         </div>
    54. 

  54.         <script>
    55. 

  55.             var today = new Date(); 
    56. 

  56.             var year = today.getFullYear(); 
    57. 

  57.             var month = today.getMonth() + 1; 
    58. 

  58.             var day = today.getDate(); 
    59. 

  59.             var allday = 0;
    60. 

    61. 

  61.             function showmonth() {
    62. 

  62.                 var year_month = year + "年" + month + "月" + day + "日";
    63. 

  63.                 document.getElementById("month").innerHTML = year_month; 
    64. 

  64.             }
    65. 

    66. 

  66.             function count() {
    67. 

  67.                 if (month != 2) {
    68. 

  68.                     if (month == 4 || month == 6 || month == 9 || month == 11) 
    69. 

  69.                         allday = 30;
    70. 

  70.                     else
    71. 

  71.                         allday = 31;
    72. 

  72.                 } else {
    73. 

  73.                     if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) 
    74. 

  74.                         allday = 29;
    75. 

  75.                     else
    76. 

  76.                         allday = 28;
    77. 

  77.                 }
    78. 

  78.             }
    79. 

  79.             function showday() {
    80. 

  80.                 showmonth()
    81. 

  81.                 count();
    82. 

  82.                 var fistdate = new Date(year, month - 1, 1);
    83. 

  83.                 var xinqi = fistdate.getDay();
    84. 

  84.                 var daterow = document.getElementById("day");
    85. 

  85.                 for (var i = 0; i < xinqi; i++) 
    86. 

  86.                 {
    87. 

  87.                     var dayElement = document.createElement("div");
    88. 

  88.                     dayElement.className = "evrday";
    89. 

  89.                     daterow.appendChild(dayElement);
    90. 

  90.                 }
    91. 

    92. 

  92.                 for (var j = 1; j <= allday; j++) {
    93. 

  93.                     var dayElement = document.createElement("div");
    94. 

  94.                     dayElement.innerHTML = j;
    95. 

  95.                     dayElement.className = "evrday";
    96. 

  96.                     if (j == day) 
    97. 

  97.                         dayElement.style.color = "red";
    98. 

  98.                     daterow.appendChild(dayElement);
    99. 

  99.                 }
    100. 

  100.             }
    101. 

  101.             //下个月
    102. 

  102.             function next() {
    103. 

  103.                 document.getElementById('day').innerHTML = "";
    104. 

  104.                 if (month < 12) {
    105. 

  105.                     month = month + 1;
    106. 

  106.                 } else {
    107. 

  107.                     month = 1;
    108. 

  108.                     year = year + 1;
    109. 

  109.                 }
    110. 

  110.                 document.getElementById('div').innerHTML = showday();
    111. 

  111.             }
    112. 

  112.             //上个月
    113. 

  113.             function shang() {
    114. 

  114.                 document.getElementById('day').innerHTML = "";
    115. 

  115.                 if (month > 1) {
    116. 

  116.                     month = month - 1;
    117. 

  117.                 } else {
    118. 

  118.                     month = 12;
    119. 

  119.                     year = year - 1;
    120. 

  120.                 }
    121. 

  121.                 document.getElementById('div').innerHTML = showday();
    122. 

  122.             }
    123. 

  123.         </script>
    124. 

  124.     </body>
    125. 

  125. </html>
    126.

效果图

JavaScript实现简单的日历
就是不知道这个报错是怎么回事。。。
另外想实现回到今天的功能，想了一会，发现没思路。。。。试了几次都是BUG，就。。。就算了。。。JavaScript实现简单的日历

上一篇：

下一篇：

推荐阅读