Las palabras anteriores
El calendario simple es una aplicación común de objetos de fecha en JavaScript y tiene una amplia gama de usos. Este artículo explicará en detalle las ideas de implementación de calendarios simples.
Demostración de efecto
Descripción HTML
Use las dos entradas de tipo = número como controles de entrada para el año y el mes respectivamente, de modo que el botón de ajuste se incluya en el navegador avanzado
Organice la semana en orden de domingo a lunes
<div> <header class = 'control'> <input id = "conyear" type = "number" min = "1900" max = "2100" step = "1"/> <input id = "conmonth" type = "number" min = "1" max = "12" step = "1"/> </header> <div> <ad classer class = 'week'> <iv> domingo </siv> <iv> lunes </divs> divs> <Viv> tue </div> <div> jueves </div> <div> viernes </div> <div> sábado </div> </header> <section id = 'daybox'> <div id = "day1"> 1 </div> <div> 2 </div> <div> 3 </div> 4 </div> <div> 5 </div> <div> 6 </div> <div> 7 </div> 8 <biv> <Div> 9 </div> <div> 10 </div> <div> 11 </div> <div> 12 </div> <div> 13 </div> <div> 14 </div> <div> 15 </div> <div> 16 </div> <div> 17 </div> <div> 18 </div> <div> 19 <div> <div> 20 </div> <div> 21 </div> 22 <Div> 22 <div> <Viv> 23 </div> <div> 24 </div> <div> 25 </div> <div> 26 </div> <div> 27 </div> <div> 28 </div> <div> 29 </div> <divid = "day30"> 30 </div> <div = "day31"> 31 </div> </sect> </div> </div> </div>
Descripción de CSS
Para la implementación de un calendario simple, primero determine la disposición de los divs de class = "día" en el calendario que flota. Esto permite que todos los divs del mismo nivel sigan el movimiento cambiando la posición del primer día de divs.
cuerpo {margen: 0;} entrada {border: ninguno; Pading: 0;}. Box {ancho: 354px; Margen: 30px Auto 0; } .Datebox {altura: 300px; borde: 2px sólido negro;} .week {desbordamiento: oculto; Border-Bottom: 1px Solid Black; Línea-aguja: 49px;}. Week-in {Height: 49px; flotante: izquierda; Ancho: 50px; Text-Align: Center;}. Daybox {desbordamiento: Hidden;}. Day {float: izquierda; Altura: 50px; Ancho: 50px; fuente: 20px/50px 'Microsoft Yahei'; Text-Align: Center;}. Control {desbordamiento: Hidden;}. Con-In {altura: 50px; flotante: izquierda; Ancho: 100px; Text-Align: Center; FUENTE: 20px/50px "Microsoft Yahei";}Descripción JS
Se requieren un total de 5 implementaciones para la lógica JS de calendarios simples:
【1】 Debe obtener la cantidad de días del mes, y qué día del primer día, 30 días y 31 años es la semana
【2】 Según la semana del primer día del mes, cambie el valor de margen-izquierda del primer día y muévase el primer día a la posición correspondiente; Debido a la relación flotante, el resto de los días también se trasladará a la posición correspondiente.
【3】 Ocultar días adicionales según el número de días en el mes; Por supuesto, los días que pueden estar ocultos en otros meses deben mostrarse antes de esconderse.
[4] Si el 30 del mes es el domingo, se ocupará una nueva línea. En este momento, al cambiar el valor del margen del día 30, se trasladará a la primera línea (si el día 31 puede ocupar una nueva línea, se realizará un tratamiento similar)
【5】 Después de cargar la página, obtenga el año y el mes en curso para mostrar el calendario del mes actual; Al cambiar el año o el mes, obtenga el valor cambiado y actualice el calendario
// Preparación: Obtenga la función de estilo actual getCSS (obj, style) {if (window.getComputedStyle) {return getComputedStyle (obj) [style]; } return obj.CurrentStyle [style];} // Implementación 1: Obtenga el número de días del mes y el día de la semana del primer día, 30 y 31º Función de mes get_data (año, mes) {var resultado = {}; var d = nueva fecha (); // Si es febrero si (mes == 2) {// si es un año salpador if ((año % 4 === 0 && año % 100! == 0) || año % 400 === 0) {result.days = 29; // Si es un año común} else {result.days = 28; } // Si es el 4, 6, 9, y noviembre} else if (mes == 4 || mes == 6 || mes == 9 || mes == 11) {result.days = 30; } else {result.days = 31; // El día 31 del mes es el resultado de la semana } // El primer día del mes es el resultado de la semana if (mes! = 2) {// El día 30 del mes es el resultado de la semana. Day30week = d.getday (d.settylyar (año, mes-1,30)); } resultado de retorno;} // Implementación 2: Según la semana X del primer día del mes, establezca el margen-izquierda del primer día = ancho *x para que corresponda a la función de posición de la semana correcta Move_day1 (año, mes) {var Week1 = get_data (año, mes) .day1week; Day1.Style.Marginleft = Week1%7*ParseInt (GetCSS (Day1, 'Width'))+ 'Px';} // Implementación 3: Ocultar el número de días adicionales según el número de días del mes. Por supuesto, en primer lugar, primero debemos mostrar el número de días ocultos en otros meses Funcion Hide_days (año, mes) {// restaurar el número de días que pueden estar ocultos en otros meses para (var i = 28; i <31; i ++) {daybox.children [i] .style.display = 'block'; } // ocultar el número de días excesos en el mes var days = get_data (año, mes) .days; para (var i = días; i <31; i ++) {daybox.children [i] .style.display = 'none'; }}; // Implementación 4: Si el 30 o 31 del mes es el domingo, se ocupará una nueva fila. Mueva el día recién ocupado a la primera fila estableciendo la función de margen de margen Move_day30 (año, mes) {// si el 30º del mes es domingo si (get_data (año, mes) .day30week === 0) {day30.style.margintop = parseint (getCSS (día30, 'altura') *(-5) + 'PX'; Day31.style.MarGintOp = parseInt (getcss (day31, 'altura')) *(-5) + 'px'; Day31.style.MarGintOp = parseInt (getcss (day31, 'altura')) *(-5) + 'px'; Day31.style.Marginleft = getcss (día31, 'ancho'); devolver; } else {day30.style.margintop = day31.style.margintop = day31.style.marginleft = '0'; } // Si el 31º del mes es domingo si (get_data (año, mes) .day31week === 0) {day31.style.margintop = parseInt (getcss (day31, 'altura')) *(-5) + 'px'; } else {day31.style.margintop = '0'; }} // Implementación 5: Al cargar la página, obtenga el año y el mes en curso, muestre el calendario del mes actual; Al cambiar el año o el mes, cambie el calendario de año y mes var año = conyear.value = new Date (). GetFloyear (); var mes = conMONTH.VALUE = new Date (). getMonth () + 1; Move_day1 (año, mes); Hide_days (año, mes); Move_day30 (año, mes); conyear.onchange = conMonth.on Change conyear.value; var mes = conmONTH.Value; if (año <1900 || año> 2100) {año = conyear.value = new Date (). GetFloyear (); } if (mes <1 || mes> 12) {mes = conmonth.value = new Date (). getMonth () + 1; } Move_day1 (año, mes); hide_days (año, mes); Move_day30 (año, mes);}Demostración del código fuente
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.