Community Learn Tools Library Leisure
search
English
Home > List of blog posts > js日历,纯手工,多多指正
Blogger Information
Blog 10
fans 0
comment 0
visits 4916
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js日历,纯手工,多多指正
人生如梦
Original
496 people have browsed it

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

  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.         }
  12.         .tool_box {
  13.             height: 50px;
  14.             display: flex;
  15.             background: cornflowerblue;
  16.             justify-content: space-between;;
  17.             align-items: center;
  18.         }
  20.         .current {
  21.             display: flex;
  22.             flex-direction: column;
  23.             align-items: center;
  25.         }
  27.         .week {
  28.             height: 50px;
  29.             display: flex;
  30.             justify-content: space-around;
  31.             align-items: center;
  32.             background: #CCCCCC;
  33.         }
  35.         .days {
  36.             display: flex;
  37.             flex-wrap: wrap;
  38.             text-align: center;
  39.         }
  41.         .days div {
  42.             width: 71px;
  43.             height: 50px;
  45.         }
  47.         .current_day {
  48.             color: #FF0000;
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  53. <div class="wrap">
  54.     <div class="tool_box">
  55.         <div class="prev">上一月</div>
  56.         <div class="current">
  57.             <div class="year" id="year">年</div>
  58.             <div class="month" id="month">月</div>
  59.         </div>
  60.         <div class="next">下一月</div>
  61.     </div>
  62.     <div class="week">
  63.         <div class="week_item">日</div>
  64.         <div class="week_item">一</div>
  65.         <div class="week_item">二</div>
  66.         <div class="week_item">三</div>
  67.         <div class="week_item">四</div>
  68.         <div class="week_item">五</div>
  69.         <div class="week_item">六</div>
  70.     </div>
  71.     <div class="days" id="days">
  73.     </div>
  74. </div>
  75. <script>
  77.     var monthArr = [
  78.         '一月',
  79.         '二月',
  80.         '三月',
  81.         '四月',
  82.         '五月',
  83.         '六月',
  84.         '七月',
  85.         '八月',
  86.         '九月',
  87.         '十月',
  88.         '十一月',
  89.         '十二月'
  90.     ]
  93.     function getDays(today) {
  94.         var month = today.getMonth();
  95.         var yearStr = today.getFullYear(); //当前年
  96.         document.querySelector('#year').textContent = yearStr;
  97.         var monthStr = monthArr[month]; //当前月
  98.         document.querySelector('#month').textContent = monthStr;
  99.         var date = today.getDate(); //当前日
  101.         var currentMonth = today.setDate(1);
  102.         var monthFirstDay = new Date(currentMonth); //本月1日
  103.         var currentMonthFirstWeek = monthFirstDay.getDay();
  105.         nextMonth = monthFirstDay.setMonth(month + 1);
  106.         prevMonth = monthFirstDay.setMonth(month - 1)
  108.         var currentMonthLastDay = new Date(nextMonth - 86400000)
  109.         var currentMonthLastDayStr = currentMonthLastDay.getDate();
  111.         var day = '';
  112.         for (let w = 0; w < currentMonthFirstWeek; w++) {
  113.             day += '<div></div>';
  114.         }
  115.         for (let i = 1; i <= currentMonthLastDayStr; i++) {
  116.             if (i == date) {
  117.                 day += '<div class="current_day">' + i + '</div>';
  118.             } else {
  119.                 day += '<div>' + i + '</div>';
  120.             }
  121.         }
  122.         document.querySelector('#days').innerHTML = day;
  123.     }
  125.     var today = new Date();
  126.     getDays(today);
  128.     document.querySelector('.next').onclick = function () {
  129.         today = new Date(nextMonth);
  130.         getDays(today)
  132.     }
  133.     document.querySelector('.prev').onclick = function () {
  134.         today = new Date(prevMonth);
  135.         getDays(today);
  136.     }
  137. </script>
  138. </body>
  139. </html>

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：不必太过纠结样式，侧重点还是学好JS
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post