Recentemente, analisei algumas funções sobre as datas do JS e de repente pensei no controle do calendário. Então eu tentei escrever um. Como programador de fundo, sou limitado no meu nível. Vamos dar uma atitude de aprendizado e dar uma olhada no exemplo que escrevi. Vamos aprender juntos para progredir!
Primeiro, uma função de data comumente usada:
Data (ano, mês, dia)
var date = new Date ();
Obtenha ano
var ano = this.date.getlyear ();
Obtenha mês, aqui está o índice mensal, então você precisa de +1
var mês = this.date.getmonth ()+1;
Que dia é a data de aquisição
var dia = this.date.getdate ();
Pegue o dia da semana, retorne 0. Domingo 1. Segunda -feira 2. Terça -feira 3. Quarta -feira 4. Quinta
var semana = this.date.getday ();
Obtenha que dia da semana é naquele mês
var getweekday = função (ano, mês, dia) {var date = nova data (ano, mês, dia); Data de retorno.getday (); } var weekStart = getWeekday (this.year, this.month-1, 1)Obtenha o número de dias no mês
var getMonthDays = função (ano, mês) {var date = nova data (ano, mês, 0); Data de retorno.getDate (); } var MonthDays = this.getmonthDays (this.year, this.month);Ok, usamos apenas tantos parâmetros. A seguir, são apresentadas algumas operações e julgamentos sobre a data correspondente à semana, rótulos dinâmicos de splicing. Vamos postar diretamente o exemplo que escrevi:
Imagem de reprodução:
<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/javscript"> wail.onload = function = (function) (script) (javascript "> this.init.Apply (isto, argumentos); } Calender.prototype = {init: function (contêiner, opções) {this.date = new Date (); this.year = this.date.getlyear (); 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 (contêiner); this.options = opções! = null? Opções: {borda: '1px verde sólido', largura: '400px', altura: '200px', backgroundcolor: 'Lightgrey', fontcolor: 'azul'}}, getMonthDays: function (ano, mês) {var date = new (ano, mês, 0); Data de retorno.getDate (); }, getWeekday: function (ano, mês, dia) {var date = nova data (ano, mês, dia); Data de retorno.getday (); }, View: function () {var tableSt = '<table>'; TableSt+= '<tr> <td colspan = "3"> </td> <td> ano:'+this.year+'</td> <td colspan = "3"> mês:' this.month+'</td> </tr>'; TableSt+= '<tr> <td> dia </td> <td> dois </td> <td> quatro </td> <td> cinco </td> <td> seis </td> </tr>'; var índice = 1; // julga onde o primeiro dia de cada mês é var estilo = ''; if (this.weekstart <7) {tablest+= '<tr>'; for (var i = 0; i <this.weekstart; i ++) {tablest+= '<td> </td>'; }; for (var i = 0; i <7-this.Weekstart; i ++) {style = this.day == (i+1)? "Cores de fundo: verde;": ""; índice ++; Tablest+= '<td style = "'+style+'" val ='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td>'; }; TableSt+= '</tr>'; } /// a posição correspondente aos dias restantes // julga a linha inteira e corresponde à posição correspondente var restante var row = math.floor (restos de restos%7 == 0? Restantes/7: ((restos de remanescente/7) +1)); var count = math.floor (restos de restos/7); for (var i = 0; i <count; i ++) {tablest+= '<tr>'; for (var k = 0; k <7; k ++) {style = this.day == (índice+k)? "cor de fundo: verde;": ""; Tablest+= '<td style = "'+style+'" "val ='+(this.year+'-'+this.month+'-'+(index+k))+'>'; tablest+= index+k; tablest+= '</td>';}; tablest+= '</tr>'; Permanente, thalymOnthdays- (Index-1); TableSt+= Índice; TableSt+= '</td>'; índice ++; }; TableSt+= '</tr>'; TableSt+= '</tabela>'; retornar tablests; }, 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 = 'ponteiro'; calendardiv.style.backgroundColor = this.options.backgroundColor; // calendardiv.style.color = this.options.fontcolor; calendardiv.style.color = 'vermelho'; calendardiv.OnClick = function (e) {var evt = e || window.event; var no destino = evt.srcelement || evt.target; if (Target && Target.getAttribute ('val')) {alert (Target.getAttribute ('val')); }} var tableSt = this.View (); this.tablestr = tablest; calendardiv.innerhtml = tablest; var div = document.createElement ('div'); div.style.width = 'Auto'; div.style.Height = 'Auto'; Div.AppendChild (CalenderDiv); /// página turn div var PagerDiv = document.createElement ('div'); Pagerdiv.style.width = 'Auto'; Pagerdiv.style.Height = 'Auto'; var que = this; /// Redefina o parâmetro var resetPara = function (ano, mês, dia) {that.date = nova data (ano, mês, dia); that.year = that.date.getlyear (); that.month = that.date.getMonth ()+1; that.day = that.date.getdate (); that.week = that.date.getday (); that.weekstart = that.getweekday (that.year, that.month-1, 1); that.monthDays = that.getmonthDays (that.year, that.month); } // página anterior var preBtn = document.createElement ('input'); prebtn.type = 'botão'; prebtn.value = '<'; prebtn.OnClick = function () {that.Containerdiv.RemoveChild (div); resetpara (that.year, that.month-2, that.day); that.render (); } // Próxima página var nextBtn = document.createElement ('input'); nextbtn.type = 'botão'; nextbtn.value = '>'; nextBtn.OnClick = function () {that.Containerdiv.RemoVechild (div); resetpara (that.year, that.month, that.day); that.render (); } Pagerdiv.appendChild (prebtn); Pagerdiv.appendChild (NextBtn); Div.AppendChild (PAGERDIV); var DropDiv = document.createElement ('div'); var DropDivstr = ''; // Selecione o ano DropDivstr+= '<select id = "ddlyear">'; para (var i = 1900; i <= 2100; i ++) {DropDivstr+= i == that.year? '<Opção value = "'+i+'" selected = "true">'+i+'</pption>': '<opção value = "'+i+'' '+i+' '</pption>'; }; DropDivstr+= '</leclect>'; // Selecione o mês DropDivstr+= '<select id = "ddlmonth">'; para (var i = 1; i <= 12; i ++) {DropDivstr+= i == that.month? '<opção value = "'+i+''" selected = "true"> '+i+' </pption> ':' <opção value = "'+i+' ''+i+'' </option> '; }; DropDivstr+= '</leclect>'; DropDiv.innerhtml = DropDivstr; Div.AppendChild (DropDiv); that.containerdiv.appendChild (div); /// Ligue o evento que seleciona ano e mês var ddlChange = function () {var ddlyear = document.getElementById ('ddlyear'); var ddlmonth = document.getElementById ('ddlmonth'); var anoIndex = ddlyear.SelectedIndex; var ano = ddlyear.options [ano -index] .Value; var MonthIndex = ddlmonth.SelectedIndex; var mês = ddlMonth.Options [MonthIndex] .Value; that.Containerdiv.RemoveChild (div); resetpara (ano, mês-1, th.day); that.render (); } ddlyear.onchange = function () {ddlchange (); } ddlmonth.onchange = function () {ddlchange (); }}} var calendário = new Calender ('dvTest', {borda: '1px verde sólido', largura: '400px', altura: '200px', backgroundcolor: ''}); calendário.render (); } </script> </ad Head> <body> <div id = "dvTest"> </div> </body> </html>O código foi alterado novamente e a tabela da visualização é substituída por uma div, a fim de resolver o problema somente leitura da tabela da IE da IE. Além disso, são adicionadas opções para configurabilidade.
O código acima tem uma explicação simples e as funções são as mais básicas. Se você fizer isso em profundidade, poderá expandi -lo. Espero que este artigo possa lhe dar alguma inspiração.