创建表年

Question

我有我的表/网格：。这有365个div，每天1个，用js：

创建

$(document).ready(function() {
    for (var i = 0; i < daysInThisYear(); i++) {
        $('#año').append('<div class="dia" id="div' + i +'" /> ');
    }
})

这可以检测365天或366天：

function daysInThisYear() {
  return isLeapYear() ? 366 : 365;
}

function isLeapYear() {
     return currentYear % 400 === 0 || (currentYear % 100 !== 0 && currentYear % 4 === 0);
}

好吧，我的网格还可以，但是我想要放几天和几个月，就像这样：。如果月份有31天，创建31个正方形，一切都在一起，没有分色，我该怎么做？并将当天的数字放在左边，将月份的数字放在顶部，如果对此如何，谢谢。

Answer 1

一种策略可以是数组中的商店天数，并获得每一天的总天数。

这将是：

var totalDaysOfMonth = [31, isLeapYear() ? 29: 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

根据需要制作网格，你可以每月附加一个div，花费数组的总天数，这里有个想法：

https://jsbin.com/joficawofi/edit?html,css,js,output

以其他方式获取每月的总天数：What is the best way to determine the number of days in a month with javascript?

Answer 2

此代码将按您的意愿创建表。

我使用Date对象来检测闰年，因为已经提供了逻辑。通过尝试将日期设置为2月29日的给定年份，如果是闰年，则将其保留为2月29日，或者在非闰年将其更改为3月1日。

function isLeapYear(year) {
  var resp = new Date(year,1,29).getDate()===29;;
  return resp;
}


var daysOfMonth = [31, isLeapYear((new Date().getFullYear())) ? 29: 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var monthLetters = 'JFMAMJJASOND'.split('');


var calendarEl = document.getElementById("calendar");
var dayEl, monthEl;
var monthEl = document.createElement('div');
monthEl.className = "calendar-month";
tempEl = document.createElement('div');
tempEl.className = "calendar-month__title";
monthEl.appendChild(tempEl);

for(let i = 0; i < 31; i++) {
  dayEl = document.createElement('div');
  dayEl.className = 'calendar-day calendar-day__number';
  dayEl.textContent = i;
  monthEl.appendChild(dayEl);
}

calendarEl.appendChild(monthEl);
daysOfMonth.forEach(
  function(days, month) {
    monthEl = document.createElement('div');
    monthEl.className = "calendar-month";
    monthEl.setAttribute('data-month', month+1);
    tempEl = document.createElement('div');
    tempEl.className = "calendar-month__title";
    tempEl.textContent = monthLetters[month];
    monthEl.appendChild(tempEl);
    
    for(let i = 0; i < days; i++) {
      dayEl = document.createElement('div');
      dayEl.className = 'calendar-day';
      dayEl.setAttribute('data-date', i+1);
      monthEl.appendChild(dayEl);
    }
    calendarEl.appendChild(monthEl);
  }
);

.calendar-month {
  display: inline-block;
  vertical-align: top;
  width: 20px;
}

.calendar-day {
  border: 1px solid black;
  border-top: none;
  box-sizing: border-box;
  height: 20px;
  width: 20px;
}

.calendar-month__title {
  border-bottom: 1px solid black;
  height: 20px;
  overflow: hidden;
  text-align: center;
  width: 20px;
}

.calendar-day__number {
  border-left-color: transparent;
  text-align: right;
  margin-right: 5px;
}

<div id="calendar"></div>

通过一些额外的工作，你可以让边框的宽度正常工作，但这可以让你在那里大部分时间。