La pantalla del calendario, la selección, etc. se utilizan en muchos lugares en la página web. Este artículo utiliza HTML, CSS y JavaScript para implementar un calendario simple. Después de la finalización, el efecto es similar al efecto en el lado izquierdo de la página. Puede cambiar al mes anterior o el próximo mes. También se puede ampliar de acuerdo con las condiciones reales.
html
La parte HTML es relativamente simple, declara un DIV y el HTML específico se genera usando JavaScript. El contenido general es más o menos así:
< ruta '> </script> </body> </html>
CSS
/*Configuración general*/*{margen: 0px; relleno: 0px;}/***Establezca el tamaño del calendario*/. Calendario {ancho: 240px; Altura: 400px; Display: Block;}/*** Establezca el cuadro superior del calendario*/. Calendario .Calendar-title-box {posicion: relativo; Ancho: 100%; Altura: 36px; Línea de altura: 36px; Text-Align: Center; Border-Bottom: 1px Solid #ddd;}/*** Establezca el icono del botón para el mes pasado*/. Calendar .Prev-Month {Position: Absolute; arriba: 12px; Izquierda: 0px; Pantalla: bloque en línea; Ancho: 0px; Altura: 0px; borde-izquierda: 0px; Top de borde: 6px sólido transparente; Border-Right: 8px Solid #999; Border-fondo: 6px sólido transparente; cursor: pointer;}/*** Establezca el icono del botón del próximo mes*/. Calendario .Next-Month {Position: Absolute; arriba: 12px; Derecha: 0px; Pantalla: bloque en línea; Ancho: 0px; Altura: 0px; border-right: 0px; Top de borde: 6px sólido transparente; Border-izquierda: 8px Solid #999; Border-fondo: 6px sólido transparente; cursor: pointer;}/* Establecer estilo de mesa de calendario*/. calendar-table {ancho: 100%; Colapso de borde: colapso; Text-Align: Center;}/* Tabla Altura de línea*/. Calendar-Table tr {altura: 30px; Line-Height: 30px;}/* Pantalla especial de color de día actual*/. CurrentDay {color: rojo;}/* El color de texto de este mes*/. CurrentMonth {color: #999;}/* Otro mes Colors*/. OtherMonth {color: #ede;}Básicamente no hay nada que decir sobre la configuración de estilo, algunas configuraciones simples. Por ejemplo, el especial es el ícono que representa "el mes pasado" y "el próximo mes", que adopta un posicionamiento absoluto y utiliza el atributo de borde en CSS para establecer estilos.
objeto de fecha de JavaScript
Antes de comenzar el código JS formal, debe comprender el objeto de fecha en JS. A través del objeto de fecha, puede obtener información como año, mes, día, hora y sellos de tiempo. Para referencia específica: http://www.w3school.com.cn/jsref/jsref_obj_date.asp
var d1 = nueva fecha (); // Obtener la hora actual del sistema, mi hora actual es el lunes 25 de abril de 2016 d1.getblyear (); // Obtener la información anual, 2016 d1.getMonth (); // Obtener la información mensual (a partir de 0: 0-11) 3 d1.getDate (); // Obtenga la información del día aquí el resultado: 25 d1.getday (); // Obtener la información semanal (0-6) aquí el resultado: 1
También puede establecer la información de año, mes y fecha directamente durante la inicialización.
# Establecido 15 de marzo de 2016 var d2 = nueva fecha (2016, 2, 15); // Los meses se cuentan a partir de 0, y debe restar uno d2.getyLyear (); // 2016 d2.getmonth (); // 2 d2.getDate (); // 15 d2.tolocaledateString (); // "2016/3/15" demuestra que la configuración es correcta
El calendario involucra cuestiones como cuántos días por mes. Es muy simple en JS. Si se establecen el año, el mes y el día, si excede el mes actual, JS calculará automáticamente el próximo mes. Por ejemplo, April solo tiene 30 días. Si se establece en 31, el tipo de fecha obtenido calculará automáticamente el 1 de mayo. Si está configurado en 0, JS lo procesará como el 30 de abril, entonces mayo-1 es el 29 de abril.
var d3 = nueva fecha (2016, 3, 30); d3.tolocaledateString (); // "2016/4/30" var d4 = nueva fecha (2016, 3, 31); d4.tolocaledateString (); // "2016/5/1" var d5 = nueva fecha (2016, 3, 33); d5.tolocaledateString (); // "2016/5/3" var d6 = nueva fecha (2016, 4, 1); d6.tolocaledateString (); // "2016/5/1" var d7 = nueva fecha (2016, 4, 0); d7.tolocaledateString (); // "2016/4/30" var d8 = nueva fecha (2016, 4, -3); d8.tolocaledateString (); // "2016/4/27"
javascript
Después de comprender el uso básico de los objetos de fecha en JS, el siguiente paso es la parte de implementación del código. La idea general es la siguiente: defina una variable Global DateObj para registrar la información de año y mes que debe mostrarse en la tabla. El contenido del título se toma en función de DateObj. La fecha en la tabla toma toda la información del número 1 correspondiente al año y el mes en DateObj, y luego determina la posición del número 1 en la primera fila de la tabla, para revertir los datos de los últimos días del mes anterior, y los datos de este mes y el próximo mes se están retrasando.
Pasos específicos:
1. Declare la variable dateObj y asigne el valor inicial a la hora actual del sistema
2. Renderiza elementos HTML en el calendario div
3. Obtenga la información sobre el 1 ° del mes a dateObj y úsela para atravesar todas las fechas en la tabla.
4. Vinculación de eventos para el mes anterior y los íconos del próximo mes
(function () { /** utilizado para grabar fechas. Cuando se muestra, se mostrará de acuerdo con el año y el mes de la fecha en dateObj* / var dateObj = (function () {var _date = new date (); // default es el retorno de tiempo actual {getDate: function () {return};}, setDate: function (date) {_date = date = date:};};};};};};}; // Establecer la parte html en el calendario divenderhtml (); Establece el título del mes anterior el próximo mes var corpodbox = document.createElement ("div"); id = 'calendartitle'> </span> " +" <span id = 'nextmonth' class = 'next-Month'> </span> "; calendar.appendChild (titleBox); // Agregar a calendar div // establecer la estructura html del área de tabla cuerpo.classname + "<th> one </th>" + "<th> two </th>" + "<th> tres </th>" + "<th> cuatro </th>" + "<th> cinco </th>" + "<th> Six </th>" + "</tr>"; = 0; "<TD> </td>" + "<TD> </td>" + "</tr>"; en la tabla y establecer el nombre de clase*/ FUNCIÓN SHOWCALENDATA () {var _Year = dateObj.getDate (). document.getElementById ("CalendArtitle"); _table.getElementsByTagName ("td"); _THISDAYSTR = GetDatestr (_Thisday); Day_tds [i] .ClassName = 'CurrentDay'; } / *** Binde el evento del mes anterior el próximo mes* / funcional addEvent (dom, etype, func) {if (dom.addeventListener) {// dom 2.0 // DOM 0 ['en' + etype] = function (e) {func (e); / *** Haga clic en el icono del próximo mes para activar* / function tonextmonth () {var date = dateObj.getDate (); getDatestr (date) {var _year = date.getblyear (); ("0" + _d);En este ejemplo, no se agrega el evento al hacer clic en la fecha en la tabla. Puede agregar el siguiente código a la función BindEvent para obtener la información sobre la fecha en que se hace clic.
var tabla = document.getElementById ("CalendArtable"); var tds = table.getElementsBytagName ('td'); for (var i = 0; i <tds.length; i ++) {addEvent (tds [i], 'click', function (e) {console.log (e.target.getattribe ('data'));});});});});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.