Дисплей календаря, выбор и т. Д. Используются во многих местах на веб -странице. В этой статье используются HTML, CSS и JavaScript для реализации простого календаря. После завершения эффект аналогичен эффекту на левой стороне страницы. Вы можете переключиться на предыдущий месяц или следующий месяц. Это также может быть расширен в соответствии с фактическими условиями.
HTML
Часть HTML относительно проста, объявляет DIV, а конкретный HTML генерируется с использованием JavaScript. Общий контент примерно такой:
<! Doctype html> <html> <head> <meta charset = 'utf-8'> <link rel = 'styleSheet' href = 'vensoble css file path'/> <tite> demo </title> </head> <body> <div class = 'calendar' id = 'calendar'> </div> <script upt PATH '> </script> </body> </html>
CSS
/*Общие настройки*/*{Margin: 0px; Padding: 0px;}/***Установите размер календаря*/. Календарь {ширина: 240px; Высота: 400px; дисплей: block;}/*** Установите верхнюю коробку календаря*/. Календарь. Календар-Title-box {position: относительно; Ширина: 100%; Высота: 36px; высота линии: 36px; Текст-альбом: Центр; Border-Bottom: 1px solid #ddd;}/*** Установите значок кнопки для прошлого месяца*/. Календарь .prev-month {position: Absolute; Верх: 12px; слева: 0px; дисплей: встроенный блок; Ширина: 0px; высота: 0px; РЕМЖА СЛЕДУ: 0px; Пограничная топ: 6px Solid Transparent; граница правая: 8px solid #999; Пограничный подвод: 6px сплошной прозрачный; Cursor: pointer;}/*** Установите значок кнопки в следующем месяце*/. Календарь .NEXT-MONTH {Position: Absolute; Верх: 12px; Справа: 0px; дисплей: встроенный блок; Ширина: 0px; высота: 0px; граница правая: 0px; Пограничная топ: 6px Solid Transparent; РЕМЕР-ЛЕРФ: 8px Solid #999; Пограничный подвод: 6px сплошной прозрачный; Cursor: pointer;}/* Установить календарный стиль таблицы*/. Календарь-стол {ширина: 100%; пограничный коллапс: коллапс; Text-Align: Center;}/* Высота строки таблицы*/. Календарь-стол tr {высота: 30px; Line-Height: 30px;}/* Цвет текущего дня Специальный дисплей*/. CurrentDay {color: red;}/* Цвет текста в этом месяце*/. CurrentMonth { #999;}/* Другие цвета месяца*/. othermonth {color: #ede;};};};};};};В основном нечего сказать о настройках стиля, о простых настройках. Например, специальный - это значок, который представляет «в прошлом месяце» и «в следующем месяце», который принимает абсолютное позиционирование и использует пограничный атрибут в CSS для установки стилей.
JavaScript Date объект
Перед началом формального кода JS вам необходимо понять объект даты в JS. Через объект даты вы можете получить такую информацию, как год, месяц, день, время и марки времени. Для конкретной ссылки: http://www.w3school.com.cn/jsref/jsref_obj_date.asp
var d1 = новая дата (); // Получить текущее системное время. Мое текущее время - понедельник, 25 апреля 2016 г. d1.getfyear (); // Получить годовую информацию, 2016 D1.getMonth (); // Получить ежемесячную информацию (начиная с 0: 0-11) 3 d1.getDate (); // Получить информацию здесь Результат: 25 d1.getday (); // Получить еженедельную информацию (0-6) Здесь результат: 1
Вы также можете установить информацию о году, месяце и дате непосредственно во время инициализации
# Установить 15 марта 2016 г. var d2 = новая дата (2016, 2, 15); // месяцы подсчитываются от 0, и вам нужно вычесть один d2.leadflyear (); // 2016 d2.getmonth (); // 2 d2.getDate (); // 15 D2.tolocalEdatestring (); // "2016/3/15" доказывает, что настройки верны
Календарь включает в себя такие проблемы, как много дней в месяц. Это очень просто в JS. Если будут установлены год, месяц и день, если он превышает текущий месяц, JS автоматически рассчитывает в следующем месяце. Например, у апреля всего 30 дней. Если он установлен на 31, полученный тип даты автоматически рассчитывает 1 мая. Если он установлен в 0, JS обработает его как 30 апреля, то май-1-29 апреля.
var d3 = новая дата (2016, 3, 30); d3.tolocaleDatestring (); // "2016/4/30" var d4 = новая дата (2016, 3, 31); d4.tolocaleDatestring (); // "2016/5/1" var d5 = новая дата (2016, 3, 33); d5.tolocaleDatestring (); // "2016/5/3" var d6 = новая дата (2016, 4, 1); d6.tolocaleDatestring (); // "2016/5/1" var d7 = новая дата (2016, 4, 0); d7.tolocaleDatestring (); // "2016/4/30" var d8 = новая дата (2016, 4, -3); d8.tolocaledAtestring (); // "2016/4/27"
JavaScript
После понимания основного использования объектов даты в JS следующим шагом является часть реализации кода. Общая идея заключается в следующем: Определите глобальную переменную DateOBJ для записи информации о годовом и месяце, которую необходимо отобразить в таблице. Контент в заголовке принимается на основе DateObj. Дата в таблице получает всю информацию о № 1, соответствующей году и месяцу в DateOBJ, а затем определяет позицию № 1 в первом ряду таблицы, чтобы отменить данные последних нескольких дней предыдущего месяца, а данные этого месяца и следующего месяца возвращаются.
Конкретные шаги:
1. Объявите переменную DateOBJ и назначьте начальное значение текущему системному времени
2. рендеринг HTML -элементов в календаре Div
3. Получите информацию на 1 -м месяце через DateOBJ и используйте ее для прохождения всех дат в таблице.
4. Bind Events для значков предыдущего месяца и следующего месяца
(function () { /** Используется для записи дат. При отображении он будет отображаться в соответствии с годом и месяцем даты в DateObj* / var dateObj = (function () {var _date = new Date (); // По умолчанию является текущее время System Time return {getDate: funct () {return _date;}, setDate: function (date) {_date; }) (); Document.CreateElement ("Div"); class = 'Calendar-title' id = 'calendartitle'> </span> " +" <span id = 'nextmonth' class = 'next-month'> </span> "; calendar.appendchild (titlebox); // Добавить в календарный div // html-структура Bodybox.classname = 'calendar-box-box'; "<Th> Day </th>" + "<Th> One </th>" + "<Th> Two </th>" + "<Th> три </th>" + " заняты через месяц для (var i = 0; i <6; i ++) {_bodyhtml + = "<tr>" + "<td> </td>" + "<td> </td>" + "<td> </td>" + "<td> </td>" + "<td> </td>" <TD> "<td> </td>" + "<td> </td>" + "<td> </td>" + "</tr>"; Calendar.appendchild (Bodybox); Информация в верхней части заголовка var calendartitle = document.getelementbyid ("calendartitle"); _TDS = _Table.GetElementsBytagName ("TD"); _firstday.getday (); Date ()) {// Current Day_tds [i] .classname = 'CurrentDay'; 'othermonth'; Событие привязки*/ function addEvent (dom, etype, func) {if (dom.addeventlistener) {// dom 2.0 dom.addeventlister (etype, function (e) {func (e);}); }); ShowCalendardata (); 2-й день*/ Функция getDatest (date) {var _year = date.getlyear (); _d): ("0" + _d);В этом примере событие при нажатии на дату в таблице не добавлено. Вы можете добавить следующий код в функцию BindEvent, чтобы получить информацию о дате Clicked.
var table = document.getElementbyId ("calendartable"); var tds = table.getElementsbytagname ('td'); for (var i = 0; i <tds.length; i ++) {addevent (tds [i], 'click', function (e) {console.log (e.target.getattribut ('data');Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.