Предыдущие слова
Простой календарь является общим применением объектов даты в JavaScript и имеет широкий спектр использования. Эта статья подробно объясняет идеи реализации простых календарей.
Демонстрация эффекта
HTML описание
Используйте два входа типа = число в качестве элементов управления вводами в течение года и месяца соответственно, чтобы кнопка регулировки была включена в расширенный браузер
Организовать неделю в порядке с воскресенья по понедельник
<div> <header class='control'> <input id="conYear" type="number" min="1900" max="2100" step="1"/> <input id="conMonth" type="number" min="1" max="12" step="1"/> </header> <div> <header class='week'> <div>Sunday</div> <div>Monday</div> <div>Tue</div> <div>Thursday</div> <div>Friday</div> <div>Saturday</div> </header> <section id='dayBox'> <div id="day1">1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> <div>16</div> <div>17</div> <div>18</div> <div>19</div> <div>20</div> <div>21</div> <div>22</div> <div> 23 </div> <div> 24 </div> <div> 25 </div> <div> 26 </div> <div> 27 </div> <div> 28 </div> <div> 29 </div> <div id = "day30"> 30 </div> <div id = "day31"> 31 </div> </section> </div> </div> </div> 31 "
CSS описание
Для реализации простого календаря сначала определите расположение Divs of Class = "Day" в календаре, который будет плавать. Это позволяет всем DOV такого уровня следовать движению, изменяя позицию первого дня DOV.
Body {margin: 0;} input {border: none; Надо: 0;}. Box {ширина: 354px; Маржа: 30px Auto 0; } .Datebox {height: 300px; Граница: 2px Solid Black;} .Week {Overflow: Hidden; Пограничный подвод: 1px сплошной черный; Линия-высота: 49px;}. Week-in {height: 49px; Плавание: осталось; Ширина: 50px; Text-align: center;}. Daybox {Overflow: Hidden;}. Day {float: left; Высота: 50px; Ширина: 50px; Шрифт: 20px/50px 'microsoft yahei'; Text-align: center;}. Control {Overflow: Hidden;}. Con-in {height: 50px; Плавание: осталось; Ширина: 100px; Текст-альбом: Центр; Шрифт: 20px/50px "Microsoft yahei";}JS описание
В общей сложности 5 реализаций требуется для логики JS простых календарей:
【1】 Вам нужно получить количество дней месяца, а какой день первого дня, 30 -й день и 31 -й день - неделя
【2】 Согласно неделе первого дня месяца, измените левую стоимость по марже первого дня и перейдите в первый день на соответствующую позицию; Из -за плавающих отношений остальные дни также также перейдут в соответствующую позицию.
【3】 Скрыть дополнительные дни в зависимости от количества дней в месяце; Конечно, дни, которые могут быть спрятаны в другие месяцы, должны отображаться перед прячением.
[4] Если 30 -го числа месяца состоится в воскресенье, будет занята новая линия. В настоящее время, изменяя ценность маржи 30 -го дня, он будет перенесен на первую строку (если 31 -й день может занять новую линию, будет сделано аналогичная обработка)
【5】 После загрузки страницы получите текущий год и месяц, чтобы отобразить календарь текущего месяца; При изменении года или месяца получите измененную стоимость и обновите календарь
// Подготовка: Получите текущую функцию стиля getCss (obj, style) {if (window.getComputeDStyle) {return getComputedStyle (obj) [style]; } return obj.currentStyle [style];} // Реализация 1: Получите количество дней месяца и день недели в первый день, 30 -й и 31 -й функции месяца get_data (год, месяц) {var result = {}; var d = new Date (); // Если это февраль, если (месяц == 2) {// Если это легальный год, если ((год % 4 === 0 && Год % 100! == 0) || Год % 400 === 0) {result.days = 29; // Если это обычный год} else {result.days = 28; } // Если это 4 -й, 6 -й, 9 -й и ноябрь} else if (месяц == 4 || месяц == 6 || месяц == 9 || месяц == 11) {result.days = 30; } else {result.days = 31; // 31-й день месяца является недельным результатом. День 31 недели = D.GetDay (D.SetifyEar (год, месяц-131)); } // Первый день месяца-неделя результата. День 1-й недели = d.getday (d.setfielyear (год, месяц-1,1)); if (месяц! = 2) {// 30-й день месяца-неделя результата. День 30 недели = d.getday (d.setbyear (год, месяц-13,30)); } return Result;} // Реализация 2: Согласно неделе x первого дня месяца, установите левую маржу первого дня = ширина *x, чтобы она соответствовала правильной неделе функции позиции ove_day1 (год, месяц) {var week1 = get_data (год, месяц) .day1week; Day1.style.marginleft = неделя 1%7*parseint (getcss (day1, 'width'))+ 'px';} // Реализация 3: скрыть количество дополнительных дней в соответствии с количеством дней в месяце. Конечно, во -первых, мы должны сначала отобразить количество дней, спрятанных в другие месяцы функции hide_days (год, месяц) {// восстановить количество дней, которые могут быть скрыты в другие месяцы для (var i = 28; i <31; i ++) {daybox.children [i] .style.display = 'block'; } // Скрыть количество дней избыточного в течение месяца var days = get_data (год, месяц) .days; for (var i = days; i <31; i ++) {daybox.children [i] .style.display = 'none'; }}; // Реализация 4: Если 30 -е или 31 -е место в воскресенье, новая ряд будет занят. Переместите недавно занятый день в первый ряд, установив функцию маржи hole_day30 (год, месяц) {// Если 30-е место месяца составляет воскресенье if (get_data (год, месяц) .day30week === 0) {day30.style.margintop = parseint (getcs (day30, 'height')) *(5) + 'px; День 31.style.margintop = parseint (getcss (day31, 'height')) *(-5) + 'px'; День 31.style.margintop = parseint (getcss (day31, 'height')) *(-5) + 'px'; день 31.syle.marginleft = getCss (день 31, 'ширина'); возвращаться; } else {day30.style.margintop = day31.style.margintop = day31.style.marginleft = '0'; } // Если 31-й месяца-воскресенье if (get_data (год, месяц) .day31week === 0) {day31.style.margintop = parseint (getcss (day31, 'height')) *(-5) + 'px'; } else {day31.style.margintop = '0'; }} // Реализация 5: При загрузке страницы получите текущий год и месяц, отобразите текущий календарь месяца; При изменении года или месяца получите измененный календарь года и месяца var Year = conyear.value = new Date (). getbleear (); var month = conmonth.value = new Date (). getMonth () + 1; ower_day1 (год, месяц); hide_days (год, месяц); wove_day30 (год, месяц); conyear.value; var month = conmonth.value; if (Год <1900 || Год> 2100) {Год = conyear.value = new Date (). eleageear (); } if (месяц <1 || месяц> 12) {месяц = conmonth.value = new Date (). getMonth () + 1; } move_day1 (год, месяц); hide_days (год, месяц); MOVE_DAY30 (год, месяц);}Демонстрация исходного кода
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.