1. Проблема количества строк таблицы
Поскольку вы хотите отобразить таблицу дат, вы должны сначала знать, сколько строк и столбцов в этой таблице есть. Количество столбцов было определено, в общей сложности 7 столбцов с воскресенья (первая колонка в календаре - воскресенье) до субботы. Прежде чем решить проблему количества рядов, вы должны сначала знать, какой день первого дня месяца, потому что первый день каждого месяца не начинается с воскресенья в календаре. Это может быть пятница и суббота, поэтому левая часть 1 -го должна быть заменена пустой столом. Так сколько пустых таблиц следует использовать вместо этого? Здесь мы должны использовать метод getDay (), который возвращает число в массиве [0-6], 0 представляет воскресенье, 1 представляет понедельник, 2 представляет во вторник и т. Д. Поэтому, если 1 -й месяц - пятница, то для замены их слева требуются 5 пустых форм. Тогда, если в месяц будет 31 день, последнее количество рядов, которые можно найти:
var tr_nums = math.ceil ((5 + 31)/7);
Конечно, не каждый месяц - 31 день, поэтому мы должны создать массив 12 месяцев, каждый элемент представляет количество дней в месяц. Тем не менее, февраль очень особенный. В феврале в феврале 29 дней и только 28 дней в феврале в обычном году. Итак, прежде чем создать массив, вы должны создать функцию, которую судьи сами прыгают на себя:
// Если текущий год может быть делен на 4, но не может быть делен на 100 или может быть делен на 400, его можно определить как лечебный год, возврат 1, в противном случае возврат 0 Функция ISLEAP (Год) {Год возвращения % 4 == 0? (Год % 100! = 0? 1: (Год % 400 == 0? 1: 0)): 0; }Затем мы создаем массив месяцев:
var Days_per_month = новый массив (31, 28 + isleap (год), 31, 30, 31, 30, 31, 31, 30, 31, 31, 30, 31); Это гарантирует, что правильное количество дней будет вывезено как в обычные, так и в прыжок. Следующий код используется для получения соответствующей информации о сегодняшнем дне: var сегодня = new Date (), // Получить текущую дату y = сегодня. Подчеркивая день при создании таблицы даты) Первый день = новая дата (Y, M, 1), // Получить первый день месяца DayOfweek = FirstDay.GetDay (), // Судить день недели (вернуть один в [0-6], 0 представляет воскресенье, 1 представляет понедельник и т. Д.). 31, 30, 31, 30, 31, 31, 30, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31, 30, 31), // Создать массив месяца
Итак, в конце концов, вы можете получить количество рядов таблицы, необходимых для месяца:
var str_nums = math.ceil ((dayofweek + days_per_month [m]) / 7); // Определите количество строк, необходимых для таблицы даты
2. Распечатайте таблицу календаря
Сама таблица представляет собой двухмерный массив, поэтому пусть мастер выйдет и запустит две петли, чтобы завершить. Код заключается в следующем:
for (i = 0; i <str_nums; i += 1) {// первый слой для цикла создает tr tag document.write ('<tr>'); for (k = 0; k <7; k ++) {// Второй слой для цикла создает td Tag var idx = 7 * i+k; // Создать индекс для каждой таблицы, начиная с 0 var date = idx - dayofweek + 1; // Сопоставление 1 -го месяца с неделей // Сделать что -то еще} document.write ('</tr>'); }3. Прикрепите полный код календаря JS
<Script> // Судите, является ли текущий год лечебным годом (в феврале 29 дней в феврале и только 28 дней в феврале обычного года) функция isleap (год) {return Year % 4 == 0? (Год % 100! = 0? 1: (Год % 400 == 0? 1: 0)): 0; } var i, k, сегодня = new date (), // Получить текущую дату y = сегодня. Таблица даты) Первый день = новая дата (Y, M, 1), // Получить первый день месяца DayOfweek = FirstDay.GetDay (), // Судебные дни недели (вернуть один в [0-6], 0 представляет воскресенье, 1 представляет собой понедельник и т. Д.). 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), // Создать месяц массив str_nums = math.ceil ((dayofweek + days_per_month [m]) /7); // Определите количество строк, необходимых для таблицы даты. // распечатать первую строку таблицы (отображая неделю) для (i = 0; i <str_nums; i += 1) {// Создать таблицу даты Document.write ('<tr>'); for (k = 0; k <7; k ++) {var idx = 7 * i+k; // Создать индекс для каждой таблицы, начиная с 0 var date = idx - dayofweek + 1; // Сопоставление 1 -го числа месяца с неделей (дата <= 0 || дата> days_per_month [m])? date = '': date = idx - dayofweek + 1; // Индекс меньше или равен 0 или больше, чем максимальное значение месяца, используйте пустую таблицу вместо даты == d? Document.Write ('<Td>' + date + '</td>'): document.write ('<Td>' + date + '</td>'); // выделить день} document.write ('</tr>'); } document.write ('</table>'); </script>Давайте свободно сыграем в части CSS. Текущее время - 2 мая 2016 года, а визуализации следующие:
Выше приведено в этой статье, я надеюсь, что для всех будет полезно изучить программирование JavaScript.