Exibição do calendário, seleção etc. são usados em muitos lugares na página da web. Este artigo usa HTML, CSS e JavaScript para implementar um calendário simples. Após a conclusão, o efeito é semelhante ao efeito no lado esquerdo da página. Você pode mudar para o mês anterior ou no próximo mês. Também pode ser expandido de acordo com as condições reais.
html
A parte HTML é relativamente simples, declare uma div e o HTML específico é gerado usando JavaScript. O conteúdo geral é aproximadamente assim:
<! doctype html> <html> <head> <meta charset = 'utf-8'> <link rel = 'Stylesheet' href = 'File CSS externo caminho'/> <title> de demonstração </title> </head> <body> <div class = 'calendar'/'/' calendar '</sin> </sng> </sning> </scort> <body> <btle class =' calendar '/'/'calendar' </sin> </scring> </scort> <bodleg> <bodlet> Class = 'calendar'/'/' calendar '</sin> </scrinft Path '> </sCript> </body> </html>
CSS
/*Configurações gerais*/*{margem: 0px; preenchimento: 0px;}/***Defina o tamanho do calendário*/. Calendar {width: 240px; Altura: 400px; Exibir: bloco;}/*** Defina a caixa superior do calendário*/. Calendar .Calendar-Title-Box {Position: relativo; largura: 100%; Altura: 36px; altura de linha: 36px; Alinhamento de texto: centro; Bottom: 1px Solid #DDD;}/*** Defina o ícone do botão para o mês passado*/. Calendar .Prev-Month {Position: Absolute; topo: 12px; Esquerda: 0px; Exibição: bloco embutido; Largura: 0px; Altura: 0px; Border-Left: 0px; Top de borda: 6px transparente sólido; Fronteira: 8px Solid #999; fundo da fronteira: 6px transparente sólido; Cursor: Pointer;}/*** Defina o ícone do botão do próximo mês*/. Calendar .next-mês {Posição: Absolute; topo: 12px; Direita: 0px; Exibição: bloco embutido; Largura: 0px; Altura: 0px; Right-Right: 0px; Top de borda: 6px transparente sólido; Border-Ift: 8px Solid #999; fundo da fronteira: 6px transparente sólido; Cursor: Pointer;}/* Defina o estilo da tabela de calendário*/. Tabela de calendário {largura: 100%; colapso da fronteira: colapso; Alinhamento de texto: centro;}/* altura da linha da tabela*/. TABLE TR {Hight: 30px; altura da linha: 30px;}/* Display especial do dia atual*/.Basicamente, não há nada a dizer sobre configurações de estilo, algumas configurações simples. Por exemplo, o especial é o ícone que representa "no mês passado" e "no próximo mês", que adota posicionamento absoluto e usa o atributo de fronteira no CSS para definir estilos.
Javascript Data Object
Antes de iniciar o código JS formal, você precisa entender o objeto Data no JS. Através do objeto Data, você pode obter informações como ano, mês, dia, hora e carimbos de tempo. Para referência específica: http://www.w3school.com.cn/jsref/jsref_obj_date.asp
var d1 = new Date (); // Obtenha o horário atual do sistema, meu horário atual é segunda -feira, 25 de abril de 2016 D1.getlyear (); // obtenha as informações anuais, 2016 d1.getmonth (); // Obtenha as informações mensais (a partir de 0: 0-11) 3 d1.getDate (); // Obtenha as informações do dia aqui o resultado: 25 d1.getday (); // Obtenha as informações semanais (0-6) aqui o resultado: 1
Você também pode definir as informações do ano, mês e data diretamente durante a inicialização
# Definido 15 de março de 2016 var d2 = nova data (2016, 2, 15); // meses são contados a partir de 0 e você precisa subtrair um d2.getlyear (); // 2016 d2.getmonth (); // 2 d2.getdate (); // 15 d2.tolocaledateString (); // "2016/3/15" prova que as configurações estão corretas
O calendário envolve questões como quantos dias por mês. É muito simples em JS. Se o ano, mês e dia estiverem definidos, se exceder o mês atual, o JS calculará automaticamente no próximo mês. Por exemplo, abril tem apenas 30 dias. Se estiver definido como 31, o tipo de data obtido calculará automaticamente o 1º de maio. Se estiver definido como 0, o JS o processará em 30 de abril, então 1 de maio é 29 de abril.
var d3 = nova data (2016, 3, 30); d3.tolocaledateString (); // "2016/4/30" var d4 = new Date (2016, 3, 31); d4.tolocaledateString (); // "2016/5/1" var d5 = new Date (2016, 3, 33); d5.tolocaledateString (); // "2016/5/3" var d6 = new Date (2016, 4, 1); d6.tolocaledateString (); // "2016/5/1" var d7 = new Date (2016, 4, 0); d7.tolocaledateString (); // "2016/4/30" var d8 = new Date (2016, 4, -3); d8.tolocaledateString (); // "2016/4/27"
JavaScript
Depois de entender o uso básico dos objetos de data no JS, a próxima etapa é a parte da implementação do código. A idéia geral é a seguinte: Defina uma variável Global DateOBJ para registrar as informações do ano e do mês que precisam ser exibidas na tabela. O conteúdo do título é tomado com base no DateOBJ. A data da tabela leva todas as informações do número 1 correspondente ao ano e mês em DateObj e, em seguida, determina a posição do número 1 na primeira linha da tabela, de modo a reverter os dados dos últimos dias do mês anterior, e os dados deste mês e do próximo mês estão sendo adiados.
Etapas específicas:
1. Declare a variável dateObj e atribua o valor inicial ao tempo atual do sistema
2. Render elementos html no calendário div
3. Obtenha as informações do 1º do mês até o DateObj e use -as para atravessar todas as datas da tabela.
4. Eventos de ligação para os ícones do mês anterior e no próximo mês
(function () { /** usado para gravar datas. Quando exibidas, ele será exibido de acordo com o ano e o mês da data na databj* / var dateObj = (function () {var _date = new Date (); // padrão; }) (); Document.CreateElement ("Div"); class = 'calendar-title' id = 'calendaTitle'> </span> " +" <span id = 'nextmonth' class = 'próximo mês'> </span> "; calendar.appendChild (titlebox); // adicionar ao calendário // definir a estrutura html da tabela; "DIA <TH> </S>" + "<th> um </th>" + "<th> dois </th>" + "<th> três </th>" + "<th> quatro </th>" + "<h> cinco dias" "<th>" de 6 anos ", de 6 anos", de 6 anos ", de 6 anos", de 6 anos ", de 6 anos", de 6 anos ", de um" th> ", de 6 anos, de um" th> ", de um dos dois e". estão ocupados em um mês para (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); Informações na barra de título superior var calendaTitle = Document.getElementById ("CalENDARTITLE"); var _tds = _table.getElementsByTagName ("TD"); _firstday.getday (); getDatest (new Date ())) {// DIANTE ATUALMENTE [i] .className = 'Currentday'; meses_tds [i] .className = 'OtherMonth'; 'Clique em', Tonextmonth); função (e) {func (e); A imagem está disponível para download em alta resolução por até 1920x1080. em uma sequência, 4 bits + mês de 2 bits + dia de 2 bits*/ função getDatest (data) {var _year = date.getlyear (); = (_d> 9)?Neste exemplo, o evento ao clicar na data da tabela não é adicionado. Você pode adicionar o seguinte código à função BindEvent para obter as informações sobre a data clicada.
var tabela = document.getElementById ("calendaTable"); var tds = tabela.getElementsByTagName ('td'); for (var i = 0; i <tds.length; i ++) {addEvent (tds [i], 'click', function (e) {console.log (e.Target.At;O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.