В последнее время я спешил за проекты. Проект, наконец, сейчас находится в стабильном состоянии, просто пересмотры. Как фоновый программист, я действительно тяжелый. Я должен написать все, от Интернета до мобильного интерфейса, что многое. Полем Полем Я наконец -то поступил эти два дня. Я посмотрел на некоторые функции о свиданиях 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 mestisdays = this.getmonthdays (this.year, this.month);
Хорошо, мы использовали только так много параметров. Следующее на самом деле приведено некоторые операции и суждения о дате, соответствующей неделе, динамическим сплайсингом. Давайте прямо опубликуем пример, который я написал:
Кода -копия выглядит следующим образом:
<html>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<голова>
<стиль типа = "text/css">
td {text-align: center;}
</style>
<script type = "text/javascript">
window.onload = function () {
var calender = function () {
this.init.apply (это, аргументы);
}
Calender.prototype = {
Init: функция (контейнер, параметры) {
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? Параметры: {
Граница: 1px Solid Green ',
Ширина: '400px',
Высота: 200px ',
founalcolor: 'lightgrey',
Fontcolor: 'Blue'
}
},
GetMonthdays: function (год, месяц) {
var date = новая дата (год, месяц, 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> три </tw </td> <td> пять </tw </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>';
};
для (var i = 0; i <7-this.weekstart; i ++) {
style = this.day == (i+1)? "Founal-Color: Green;": ""; ";
index ++;
tableStr+= '<td style = "'+style+'" val ='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td>';
};
TableStr+= '</tr>';
}
/// позиция, соответствующая оставшимся дням
// судить целочисленные строки и соответствуют соответствующим позициям
var raydays = this.dthdays- (7-this.weekstart);
var row = math.floor (raydays%7 == 0? raindays/7: ((resedays/7) +1)));
var count = math.floor (raydays/7);
для (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;
tableStr+= '</td>';
};
TableStr+= '</tr>';
index+= 7;
};
// соответствующая позиция последних оставшихся дней (не может заполнить в те дни недели)
var raycols = this.dthdays- (index-1);
TableStr+= '<Tr>';
for (var i = 0; i <storkcols; i ++) {
style = this.day == Индекс?
tableStr+= '<td style = "'+style+'" 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);
/// Страница Turn Div
var pagerdiv = document.createElement ('div');
pagerdiv.style.width = 'auto';
pagerdiv.style.height = 'auto';
var that = это;
/// Сбросить параметры
var resetPara = function (год, месяц, день) {
что. 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 () {
что.containerdiv.removechild (div);
ResetPara (это.
что. render ();
}
// следующая страница
var nextBtn = document.createElement ('input');
nextbtn.type = 'button';
NextBtn.Value = '>';
nextbtn.onclick = function () {
что.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">';
для (var i = 1900; i <= 2100; i ++) {
Dropdivstr+=
я == это
? '<option value = "'+i+'" selected = "true">'+i+'</option>'
: '<option value = "'+i+'">'+i+'</option>';
};
dropdivstr+= '</select>';
// Выберите месяц
dropdivstr+= '<select id = "ddlmonth">';
для (var i = 1; i <= 12; i ++) {
Dropdivstr+=
я == это. Мон
? '<option value = "'+i+'" selected = "true">'+i+'</option>'
: '<option value = "'+i+'">'+i+'</option>';
};
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', {
Граница: 1px Solid Green ',
Ширина: '400px',
Высота: 200px ',
founalcolor: ''
}
);
Calendar.Render ();
}
</script>
</head>
<тело>
<div id = "dvtest"> </div>
</body>
</html>
Код был снова изменен, и таблица представления заменяется Div, чтобы решить проблему только для чтения TableInnerhtml IE. Кроме того, параметры добавляются для конфигурации.
Приведенный выше код имеет простое объяснение, функция является самой основной, и если вы сделаете это более подробно, вы можете расширить его.