css js写一个日历

CSS和JS写一个日历可以帮助我们更好地组织和规划我们的时间。下面先通过CSS来布局，然后利用JS来添加交互效果。

.calendar {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  box-sizing: border-box;
}

.calendar__item {
  width: calc(100% / 7);
  height: calc(300px / 7);
  border: 1px solid gray;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calendar__item--weekend {
  background-color: lightgray;
}

上面的代码中，我们首先定义了一个 .calendar 类来包含整个日历。通过设置 display: flex 和 flex-wrap: wrap，在手机端和桌面端都可以自适应地展开。接下来我们添加 .calendar__item 类来包含每个日期元素，设置了 width 和 height，一周有7天，所以宽度为占整体的 7 分之 1。在每个日期元素中，我们使用了 display: flex 和 justify-content: center、align-items: center 属性来垂直和水平居中日期文本。最后，我们利用 .calendar__item--weekend 类来区分周六和周日的日期。

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var today = date.getDate();
var day = date.getDay();
var daysPerMonth = new Date(year, month, 0).getDate();

var calendar = document.querySelector('.calendar');
var items = calendar.querySelectorAll('.calendar__item');

for (var i = 0; i < items.length; i++) {
  var item = items[i];
  var itemDay = i % 7;
  
  // weekend
  if (itemDay === 0 || itemDay === 6) {
    item.classList.add('calendar__item--weekend');
  }
  
  // date
  if (i >= day && i < daysPerMonth + day) {
    var dateNumber = i - day + 1;
    item.textContent = dateNumber;
    
    if (dateNumber === today) {
      item.classList.add('calendar__item--today');
    }
  }
}

上面的代码中，我们首先获取当前的日期信息，然后通过 document.querySelector 和 querySelectorAll 方法获取到 .calendar、.calendar__item 元素。接下来我们使用 for 循环遍历所有的日期元素，利用 new Date(year, month, 0).getDate() 方法得到当前月份的天数。然后我们动态地添加了 .calendar__item--weekend 类来标识周六和周日日期元素的样式。接着我们计算出每个日期元素应该呈现的日期数字和样式，并动态地添加 .calendar__item--today 类来标识今天的日期样式。