Я всегда хотел написать календарь в JavaScript, но, поскольку у меня вообще нет хороших идей, я давно не пробовал его. Недавно я случайно увидел пример простого календаря, написанного в JavaScript в Интернете. Хотя код не большой, я думаю, что он хорошо объясняет принцип реализации календаря JS. Я также попробовал это и много получил. После освоения основных принципов реализации я хочу добавить больше функций и могу играть в нее свободно. Позвольте мне сначала поделиться этим здесь. Если вам интересно, вы можете попробовать это!
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, в противном случае возврат 0function 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);
Это гарантирует, что правильное количество дней будет вывезено как в обычные, так и в прыжок. Следующий код используется для получения соответствующей информации на сегодня:
VAR Today = New Date (), // Получить текущую дату y = сегодня. = новая дата (y, m, 1), // Получить первый день месяца DayOfweek = FirstDay.getDay (), // Судить день недели (возвращение к одному из [0-6], 0 представляет воскресенье, 1 представляет понедельник и т. Д.
Итак, в конце концов, вы можете получить количество рядов таблицы, необходимых для месяца:
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 года, а визуализации следующие:
Приведенная выше статья «Влияние простого календаря в день написания JS» - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.