怀孕日历表 源码

以下是一个简单的怀孕日历表的 HTML、CSS 和 JavaScript 代码示例：

HTML 代码：

<div class="pregnancy-calendar">
  <div class="calendar-header">
    <span class="prev-month-btn">&lt;</span>
    <span class="current-month"></span>
    <span class="next-month-btn">&gt;</span>
  </div>
  <div class="calendar-body">
    <div class="weekdays">
      <span>周一</span>
      <span>周二</span>
      <span>周三</span>
      <span>周四</span>
      <span>周五</span>
      <span>周六</span>
      <span>周日</span>
    </div>
    <div class="days"></div>
  </div>
</div>

CSS 代码：

.pregnancy-calendar {
  width: 300px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  background-color: #eee;
}

.current-month {
  font-weight: bold;
}

.prev-month-btn,
.next-month-btn {
  cursor: pointer;
}

.weekdays {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 5px;
  background-color: #f0f0f0;
}

.days {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}

.days span {
  display: block;
  width: calc(100% / 7);
  padding: 10px 0;
  text-align: center;
}

.days span.today {
  background-color: #ff0;
}

.days span.fertile {
  background-color: #0f0;
}

.days span.ovulation {
  background-color: #f00;
}

JavaScript 代码：

(function() {
  var calendarEl = document.querySelector('.pregnancy-calendar');
  var headerEl = calendarEl.querySelector('.calendar-header');
  var monthEl = calendarEl.querySelector('.current-month');
  var prevMonthBtn = calendarEl.querySelector('.prev-month-btn');
  var nextMonthBtn = calendarEl.querySelector('.next-month-btn');
  var daysEl = calendarEl.querySelector('.days');
  
  var today = new Date();
  var currentMonth = today.getMonth();
  var currentYear = today.getFullYear();
  
  renderCalendar(currentYear, currentMonth);
  
  prevMonthBtn.addEventListener('click', function() {
    currentMonth--;
    if (currentMonth < 0) {
      currentMonth = 11;
      currentYear--;
    }
    renderCalendar(currentYear, currentMonth);
  });
  
  nextMonthBtn.addEventListener('click', function() {
    currentMonth++;
    if (currentMonth > 11) {
      currentMonth = 0;
      currentYear++;
    }
    renderCalendar(currentYear, currentMonth);
  });
  
  function renderCalendar(year, month) {
    var firstDay = new Date(year, month, 1);
    var lastDay = new Date(year, month + 1, 0);
    var daysInMonth = lastDay.getDate();
    var firstWeekday = firstDay.getDay();
    var lastWeekday = lastDay.getDay();
    var prevMonthDays = firstWeekday === 0 ? 7 : firstWeekday;
    var nextMonthDays = lastWeekday === 0 ? 0 : 7 - lastWeekday;
    var fertileDays = [8, 9, 10, 11, 12, 13, 14];
    var ovulationDay = 14;
    
    monthEl.textContent = year + '年' + (month + 1) + '月';
    
    var daysHtml = '';
    for (var i = prevMonthDays - 1; i >= 0; i--) {
      var date = new Date(year, month, 0 - i);
      daysHtml += '<span class="prev-month-day">' + date.getDate() + '</span>';
    }
    for (var i = 1; i <= daysInMonth; i++) {
      var date = new Date(year, month, i);
      var classes = [];
      if (date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate()) {
        classes.push('today');
      }
      if (fertileDays.indexOf(i) !== -1) {
        classes.push('fertile');
      }
      if (i === ovulationDay) {
        classes.push('ovulation');
      }
      daysHtml += '<span class="' + classes.join(' ') + '">' + i + '</span>';
    }
    for (var i = 1; i <= nextMonthDays; i++) {
      var date = new Date(year, month + 1, i);
      daysHtml += '<span class="next-month-day">' + date.getDate() + '</span>';
    }
    daysEl.innerHTML = daysHtml;
  }
})();

说明：

1. 代码中使用了 HTML、CSS 和 JavaScript 技术，用于绘制一个怀孕日历表。
2. 怀孕日历表显示当前月份的日历，支持前后月份切换。
3. 日历表中，周一至周日用不同颜色的文本表示，当前日期用黄色背景标注，排卵日用红色背景标注，受孕期用绿色背景标注。
4. JavaScript 代码中使用了 Date 类型和相关方法，用于日期计算和格式化。