Недавно я посмотрел на некоторые функции о датах JS и внезапно подумал о контроле календаря. Поэтому я попытался написать один. Как фоновый программист, я ограничен на своем уровне. Давайте рассмотрим отношение к обучению и посмотрим на пример, который я написал. Давайте научимся вместе, чтобы добиться прогресса!
Во -первых, обычно используемая функция даты:
Дата (год, месяц, день)
var date = new Date ();
Получить год
var year = this.date.getfyear ();
Получите месяц, вот ежемесячный индекс, поэтому вам нужен +1
var month = this.date.getmonth ()+1;
Какой день дата приобретения
var day = this.date.getDate ();
Получите день недели, возвращение 0. Воскресенье 1. Понедельник 2. Вторник 3. Среда 4. Четверг 5. Пятница 6. Суббота
var Week = this.date.getDay ();
Получите, в какой день недели это в этом месяце
var getWeekDay = function (год, месяц, день) {var date = новая дата (год, месяц, день); Дата возврата.getDay (); } var Weekstart = getWeekDay (this.year, this.Month-1, 1)Получите количество дней в месяце
var getMonthdays = function (год, месяц) {var date = новая дата (год, месяц, 0); Дата возврата.getDate (); } var monthdays = this.getMonthdays (this.year, this.month);Хорошо, мы использовали только так много параметров. Следующее на самом деле приведено некоторые операции и суждения о дате, соответствующей неделе, динамическим сплайсингом. Давайте прямо опубликуем пример, который я написал:
Изображение воспроизведения:
<html> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <head> <style type = "text/css"> td {text-align: center;} </style> <script type = "text/javascript"> window.onloigh this.init.apply (это, аргументы); } Calender.prototype = {init: function (intainer, options) {this.date = new Date (); this.year = this.date.getfyear (); this.month = this.date.getmonth ()+1; this.day = this.date.getDate (); this.week = this.date.getday (); this.weekstart = this.getweekday (this.year, this.month-1, 1); this.monthdays = this.getmonthdays (this.year, this.month); this.containerdiv = document.getElementbyId (контейнер); this.options = options! = null? Параметры: {border: '1px solid green', ширина: '400px', высота: '200px', founalcolor: 'lightgrey', fontcolor: 'blue'}}, getMonthday: функция (год, месяц) {var date = new, год, месяц, 0); Дата возврата.getDate (); }, getWeekDay: функция (год, месяц, день) {var date = новая дата (год, месяц, день); Дата возврата.getDay (); }, View: function () {var tablestr = '<table>'; tableStr+= '<tr> <td colspan = "3"> </td> <td> Год:'+this.year+'</td> <td colspan = "3"> месяц:'+this.month+'</td> </tr>'; tableStr+= '<Tr> <td> day </td> <td> два </td> <td> четыре </td> <td> пять </td> <td> шесть </td> </tr>'; var index = 1; // Судья, где первый день каждого месяца - var style = ''; if (this.weekstart <7) {tablestr+= '<tr>'; for (var i = 0; i <this.weekstart; i ++) {tablestr+= '<td> </td>'; }; for (var i = 0; i <7-this.weekstart; i ++) {style = this.day == (i+1)? "Фоно-цвета: green;": ""; index ++; tableStr+= '<td style = "'+style+'" val ='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td>'; }; TableStr+= '</tr>'; } /// Положение, соответствующее оставшимся дням // Судить о целочисленной строке и соответствует соответствующей позиции var raydays = this.monthdays- (7-this.weekstart); var row = math.floor (raydays%7 == 0? raindays/7: ((resedays/7) +1)); var count = math.floor (raydays/7); for (var i = 0; i <count; i ++) {tablestr+= '<tr>'; for (var k = 0; k <7; k ++) {style = this.day == (index+k)? TableStr+= '<td style = "'+style+'" "val ='+(this.year+'-'+this.month+'-'+(index+k))+'>'; tableStr+= index+k; tablest+= '</td>';}; tableStr+= '</tr>'; index+= 7;};//; заполнен) var orsecols = this.monthdays- (index-1); val = '+(this.year+'-'+this.month+'-'+(index))+'> '; TableStr+= index; tableStr+= '</td>'; index ++; }; TableStr+= '</tr>'; TableStr+= '</table>'; вернуть таблетки; }, Render: function () {var calendardiv = document.createElement ('div'); calendardiv.style.border = this.options.border; calendardiv.style.width = this.options.width; calendardiv.style.height = this.options.height; calendardiv.style.cursor = 'pointer'; calendardiv.style.backgroundcolor = this.options.backgroundcolor; // calendardiv.style.color = this.options.fontcolor; calendardiv.style.color = 'red'; calendardiv.onclick = function (e) {var evt = e || window.event; var target = evt.srcelement || evt.target; if (target && target.getattribute ('val')) {alert (target.getattribute ('val')); }} var tableStr = this.view (); this.tablestr = tableStr; calendardiv.innerhtml = tableStr; var div = document.createElement ('div'); div.style.width = 'auto'; div.style.height = 'auto'; Div.AppendChild (CalenderDiv); /// Страница повернуть div var pagerdiv = document.createElement ('div'); pagerdiv.style.width = 'auto'; pagerdiv.style.height = 'auto'; var that = это; /// сбросить параметр var resetPara = function (год, месяц, день) {that.date = новая дата (год, месяц, день); это. that.month = that.date.getmonth ()+1; that.day = that.date.getDate (); это. Week = that.date.getDay (); that.weekstart = that.getweekday (это. это. } // предыдущая страница var prebtn = document.createElement ('input'); prebtn.type = 'button'; prebtn.value = '<'; prebtn.onclick = function () {that.containerdiv.removechild (div); ResetPara (это. что. render (); } // следующая страница var nextBtn = document.createElement ('input'); nextbtn.type = 'button'; NextBtn.Value = '>'; NextBtn.onClick = function () {that.containerDiv.RemoveChild (div); ResetPara (это. что. render (); } pagerdiv.appendchild (prebtn); pagerdiv.appendchild (nextbtn); Div.appendchild (Pagerdiv); var dropdiv = document.createElement ('div'); var dropdivstr = ''; // выберите год dropdivstr+= '<select id = "ddlyear">'; for (var i = 1900; i <= 2100; i ++) {dropdivstr+= i == that.year? '<vitue value = "'+i+'" selected = "true">'+i+'</option>': 'antain value = "'+i+'">'+i+'</option>'; }; dropdivstr+= '</select>'; // Выберите месяц dropdivstr+= '<select id = "ddlmonth">'; for (var i = 1; i <= 12; i ++) {dropdivstr+= i == that.month? }; dropdivstr+= '</select>'; dropdiv.innerhtml = dropdivstr; div.appendchild (dropdiv); что.containerdiv.appendchild (div); /// Привязан событие, которое выбирает год и месяц var ddlChange = function () {var ddlyear = document.getElementById ('ddlyear'); var ddlmonth = document.getElementbyId ('ddlmonth'); var yearIndex = ddlyear.selectedIndex; var Year = ddlyear.options [yearIndex] .value; var monthIndex = ddlmonth.selectedIndex; var month = ddlmonth.options [monthIndex] .value; что.containerdiv.removechild (div); ResetPara (год, месяц-1, день); что. render (); } ddlyear.onchange = function () {ddlChange (); } ddlmonth.onchange = function () {ddlChange (); }}} var calendar = new Calender ('dvtest', {border: '1px solid green', width: '400px', высота: '200px', founalcolor: '' '}); Calendar.Render (); } </script> </head> <body> <div id = "dvtest"> </div> </body> </html>Код был снова изменен, и таблица представления заменяется Div, чтобы решить проблему только для чтения TableInnerhtml IE. Кроме того, параметры добавляются для конфигурации.
Приведенный выше код имеет простое объяснение, и функции являются самыми основными. Если вы сделаете это глубоко, вы можете расширить его. Я надеюсь, что эта статья может дать вам некоторое вдохновение.