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

js日历,纯手工,多多指正

程序员文章站 2022-03-13 13:58:34
...

基本实现上一月下一月,时间关系,有些细节没有完善,纯手工,应该有其它更好的办法可以参考

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>js日历</title>
  6. <style>
  7. .wrap {
  8. width: 500px;
  9. padding: 10px;
  10. }
  11. .tool_box {
  12. height: 50px;
  13. display: flex;
  14. background: cornflowerblue;
  15. justify-content: space-between;;
  16. align-items: center;
  17. }
  18. .current {
  19. display: flex;
  20. flex-direction: column;
  21. align-items: center;
  22. }
  23. .week {
  24. height: 50px;
  25. display: flex;
  26. justify-content: space-around;
  27. align-items: center;
  28. background: #CCCCCC;
  29. }
  30. .days {
  31. display: flex;
  32. flex-wrap: wrap;
  33. text-align: center;
  34. }
  35. .days div {
  36. width: 71px;
  37. height: 50px;
  38. }
  39. .current_day {
  40. color: #FF0000;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45. <div class="wrap">
  46. <div class="tool_box">
  47. <div class="prev">上一月</div>
  48. <div class="current">
  49. <div class="year" id="year"></div>
  50. <div class="month" id="month"></div>
  51. </div>
  52. <div class="next">下一月</div>
  53. </div>
  54. <div class="week">
  55. <div class="week_item"></div>
  56. <div class="week_item"></div>
  57. <div class="week_item"></div>
  58. <div class="week_item"></div>
  59. <div class="week_item"></div>
  60. <div class="week_item"></div>
  61. <div class="week_item"></div>
  62. </div>
  63. <div class="days" id="days">
  64. </div>
  65. </div>
  66. <script>
  67. var monthArr = [
  68. '一月',
  69. '二月',
  70. '三月',
  71. '四月',
  72. '五月',
  73. '六月',
  74. '七月',
  75. '八月',
  76. '九月',
  77. '十月',
  78. '十一月',
  79. '十二月'
  80. ]
  81. function getDays(today) {
  82. var month = today.getMonth();
  83. var yearStr = today.getFullYear(); //当前年
  84. document.querySelector('#year').textContent = yearStr;
  85. var monthStr = monthArr[month]; //当前月
  86. document.querySelector('#month').textContent = monthStr;
  87. var date = today.getDate(); //当前日
  88. var currentMonth = today.setDate(1);
  89. var monthFirstDay = new Date(currentMonth); //本月1日
  90. var currentMonthFirstWeek = monthFirstDay.getDay();
  91. nextMonth = monthFirstDay.setMonth(month + 1);
  92. prevMonth = monthFirstDay.setMonth(month - 1)
  93. var currentMonthLastDay = new Date(nextMonth - 86400000)
  94. var currentMonthLastDayStr = currentMonthLastDay.getDate();
  95. var day = '';
  96. for (let w = 0; w < currentMonthFirstWeek; w++) {
  97. day += '<div></div>';
  98. }
  99. for (let i = 1; i <= currentMonthLastDayStr; i++) {
  100. if (i == date) {
  101. day += '<div class="current_day">' + i + '</div>';
  102. } else {
  103. day += '<div>' + i + '</div>';
  104. }
  105. }
  106. document.querySelector('#days').innerHTML = day;
  107. }
  108. var today = new Date();
  109. getDays(today);
  110. document.querySelector('.next').onclick = function () {
  111. today = new Date(nextMonth);
  112. getDays(today)
  113. }
  114. document.querySelector('.prev').onclick = function () {
  115. today = new Date(prevMonth);
  116. getDays(today);
  117. }
  118. </script>
  119. </body>
  120. </html>

js日历,纯手工,多多指正