As palavras anteriores
O calendário simples é uma aplicação comum dos objetos de data em JavaScript e possui uma ampla gama de usos. Este artigo explicará em detalhes as idéias de implementação de calendários simples.
Demonstração de efeito
Descrição HTML
Use as duas entradas do tipo = número como controles de entrada para o ano e o mês, respectivamente, para que o botão de ajuste seja incluído no navegador avançado
Organize a semana em ordem de domingo a segunda -feira
<div> <header class = 'Control'> <input id = "conyear" type = "número" min = "1900" max = "2100" step = "1"/> <entrada id = "ConMmonth" type = "número" Min = "1" max = "12" Step = "1"/> </header> <div> <dger class " <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> 11 </div> <div> 10 </div> <div> 11 </div> <div> 12 </div> <div> 13 </div> <div> 14 </div> <div> 15 </div> <div> 16 </miv> <div> 17 <///> </Div> </div> <//Div 21 </> </> 20 20 20 20 </7> </> 20 </miv> 17 </ <div> 23 </div> <div> 24 </div> <div> 25 </div> <div> 26 </div> <div> 27 </div> <div> 28 </div> <div> 29 </div> <div id = "DIVER30"> 30 </Div> <idi = "Day31"> 31 </div> </section> </>
CSS Descrição
Para a implementação de um calendário simples, primeiro determine o arranjo das divs de class = "dia" no calendário a ser flutuando. Isso permite que todas as divs do mesmo nível sigam o movimento alterando a posição do primeiro dia divs.
corpo {margem: 0;} entrada {borda: nenhum; preenchimento: 0;}. Caixa {largura: 354px; margem: 30px automático 0; } .Datebox {altura: 300px; Border: 2px Solid Black;} .Week {Overflow: Hidden; fundo da borda: 1px preto sólido; altura de linha: 49px;}. flutuar: esquerda; Largura: 50px; Text-align: Center;}. Daybox {Overflow: Hidden;}. Day {float: esquerda; Altura: 50px; Largura: 50px; Fonte: 20px/50px 'Microsoft yahei'; Text-align: Center;}. Control {Overflow: Hidden;}. Con-in {Hight: 50px; flutuar: esquerda; Largura: 100px; Alinhamento de texto: centro; Fonte: 20px/50px "Microsoft yahei";}JS Descrição
É necessário um total de 5 implementações para a lógica JS de calendários simples:
【1】 Você precisa obter o número de dias do mês e que dia do primeiro dia, 30º dia e 31º dia é a semana
【2】 De acordo com a semana do primeiro dia do mês, altere o valor da margem-esquerda do primeiro dia e mova o primeiro dia para a posição correspondente; Devido ao relacionamento flutuante, o restante dos dias também passará para a posição correspondente.
【3】 Esconda dias extras de acordo com o número de dias no mês; Obviamente, os dias que podem estar ocultos em outros meses devem ser exibidos antes de se esconder.
[4] Se o dia 30 do mês for domingo, uma nova linha será ocupada. Neste momento, alterando o valor da margem do 30º dia, ele será movido para a primeira linha (se o 31º dia puder ocupar uma nova linha, um tratamento semelhante será feito)
【5】 Depois de carregar a página, obtenha o ano e o mês atual para exibir o calendário do mês atual; Ao mudar o ano ou mês, obtenha o valor alterado e atualize o calendário
// Preparação: obtenha a função de estilo atual getCss (obj, estilo) {if (window.getComputedStyle) {return getComputedStyle (obj) [style]; } retornar obj.currentStyle [style];} // implementação 1: obtenha o número de dias do mês e o dia da semana no primeiro dia, 30 e 31 do mês função get_data (ano, mês) {var resultado = {}; var d = new Date (); // se for fevereiro se (mês == 2) {// se for um ano bissexto se ((ano % 4 === 0 && ano % 100! == 0) || ano % 400 === 0) {resultado.days = 29; // se for um ano comum} else {result.days = 28; } // Se for o 4º, 6, 9º e novembro} else if (mês == 4 || mês == 6 || mês == 9 || mês == 11) {resultado.Days = 30; } else {resultado.days = 31; // O 31º dia do mês é o resultado da semana. } // O primeiro dia do mês é o resultado da semana. if (mês! = 2) {// O 30º dia do mês é o resultado da semana. } Resultado de retorno;} // Implementação 2: De acordo com a semana x do primeiro dia do mês, defina a margem esquerda do primeiro dia = largura *x para que corresponda à função de posição da semana correta move_day1 (ano, mês) {var week1 = get_data (ano, mês) .Day1Week; Day1.style.Marginleft = Week1%7*Parseint (getCSS (Day1, 'Width'))+ 'PX';} // Implementação 3: ocultar o número de dias extras de acordo com o número de dias no mês. Obviamente, antes de tudo, devemos primeiro exibir o número de dias ocultos em outros meses funcione hide_days (ano, mês) {// restaurar o número de dias que podem estar ocultos em outros meses para (var i = 28; i <31; i ++) {Daybox.Children [i] .style.display = 'block'; } // Ocultar o número de dias em excesso no mês var dias = get_data (ano, mês). para (var i = dias; i <31; i ++) {Daybox.Children [i] .style.display = 'nenhum'; }}; // Implementação 4: Se o dia 30 ou 31 do mês for domingo, uma nova linha será ocupada. Mova o dia recém-ocupado para a primeira linha, definindo a função do margin-top move_day30 (ano, mês) {// se o dia 30 do mês for domingo se (get_data (ano, mês) .Day30Week === 0) {Day30.style.margintop = parsent (getcss (dia30, ')). Day31.style.margintop = parseint (getCSS (Day31, 'Height')) *(-5) + 'PX'; Day31.style.margintop = parseint (getCSS (Day31, 'Height')) *(-5) + 'PX'; Day31.style.marginleft = getCss (Day31, 'Width'); retornar; } else {Day30.style.margintop = Day31.style.margintop = Day31.style.marginleft = '0'; } // Se o 31º do mês for domingo se (get_data (ano, mês) .Day31Week === 0) {Day31.style.margintop = parseint (getCss (Day31, 'Height')) *(-5) + 'px'; } else {Day31.style.margintop = '0'; }} // Implementação 5: Ao carregar a página, obter o ano e o mês atual, exibir o calendário do mês atual; Ao alterar o ano ou mês, obtenha o calendário alterado e o mês var ano = conyear.value = new Date (). getlyear (); var mês = ConMmonth.Value = new Data (). conyear.value; var mês = ConMONTH.VALUE; if (ano <1900 || ano> 2100) {ano = conyear.value = new Date (). getlyear (); } if (mês <1 || mês> 12) {mês = ConMONTH.VALUE = new Date (). getMonth () + 1; } move_day1 (ano, mês); hide_days (ano, mês); move_day30 (ano, mês);}Demonstração do código -fonte
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.