Siempre he querido escribir un calendario en JavaScript antes, pero como no tengo buenas ideas en absoluto, no lo he probado durante mucho tiempo. Recientemente, vi un ejemplo de un calendario simple escrito en JavaScript en Internet. Aunque el código no es grande, creo que explica bien el principio de implementación del calendario JS. También lo probé y gané mucho. Después de dominar los principios de implementación básicos, quiero agregar más funciones y puedo jugarlo libremente. Déjame compartirlo aquí primero. Si está interesado, ¡puede probarlo!
1. Problema de recuento de filas de tabla
Como desea mostrar la tabla de fechas, primero debe saber cuántas filas y columnas hay en esta tabla. Se ha determinado el número de columnas, con un total de 7 columnas del domingo (la primera columna en el calendario es de domingo) hasta el sábado. Antes de resolver el problema del recuento de filas, primero debe saber qué día del primer día del mes es, porque el primer día de cada mes no comienza desde los domingos en el calendario. Puede ser el viernes y el sábado, por lo que la parte izquierda de la primera debe ser reemplazada por una mesa vacía. Entonces, ¿cuántas tablas vacías se deben usar en su lugar? Aquí tenemos que usar el método getday (), que devuelve un número en la matriz [0-6], 0 representa el domingo, 1 representa el lunes, 2 representa el martes, y así sucesivamente. Entonces, si el primer mes es el viernes, entonces se necesitan 5 formularios vacíos para reemplazarlos a la izquierda. Entonces, si hay 31 días en un mes, el último número de filas que se encuentran es:
var tr_nums = Math.Ceil ((5 + 31)/7);
Por supuesto, no todos los meses son de 31 días, por lo que tenemos que crear una matriz de 12 meses, cada elemento representa el número de días cada mes. Sin embargo, febrero es bastante especial. Hay 29 días en febrero en un año bisiesto y solo 28 días en febrero en un año normal. Entonces, antes de crear una matriz, debes crear una función que juzgues saltan años por ti mismo:
// Si el año en curso puede ser divisible en 4 pero no puede ser divisible en 100 o puede ser divisible por 400, puede determinarse como un año bisiesto, regresar 1, de lo contrario, devuelva 0 Funcion Isleap (año) {retorno año % 4 == 0? (año % 100! = 0? 1: (año % 400 == 0? 1: 0)): 0;}Luego creamos una variedad de meses:
var days_per_month = nueva matriz (31, 28 + isleap (año), 31, 30, 31, 30, 31, 31, 30, 31);
Esto asegura que el número correcto de días se eliminará tanto en años ordinarios como en el salto. El siguiente código se utiliza para obtener información relevante para hoy:
var hoy = new Date (), // Obtenga la fecha actual y = Today.getblyLeear (), // Obtenga el año en la fecha M = hoy.getmonth (), // Obtenga el mes en la fecha (debe tenerse en cuenta que el mes se calcula desde 0, y el valor obtenido es 1 menos que el valor del mes normal) d = Today.getDate (). = nueva fecha (y, m, 1), // Obtenga el primer día del mes Dayofweek = Primer día.getday (), // juzga el día de la semana (regrese a uno de [0-6], 0 representa el domingo, 1 representa el lunes, y así sucesivamente) días_per_month = New Array (31, 28 + isleap (y), 31, 30, 31, 31, 31, 30, 31), / /Cine Array (31, 28 + isleap (y), 31, 30, 31, 31, 31, 30, 31), / /Cine Array (31, 28 + isleap (y), 31, 30, 31, 31, 31, 30, 31), / /Cine Array (31, 28 + isleap (y), 31, 30, 31, 31, 31, 30, 31), / /Cine Array
Entonces, al final, puede obtener el número de filas de la tabla requeridas para el mes:
var str_nums = math.ceil ((dayofweek + days_per_month [m]) / 7); // Determinar el número de filas requeridas para la tabla de fecha
2. Imprima una mesa de calendario
La mesa en sí es una matriz bidimensional, así que deje que el maestro salga y ejecute dos bucles para completar. El código es el siguiente:
for (i = 0; i <str_nums; i += 1) {// La primera capa para bucle crea Tel Tag Document.Write ('<tr>'); para (k = 0; k <7; k ++) {// La segunda capa para bucle crea TD TAG var idx = 7 * i+k; // Crear índice para cada tabla, comenzando desde 0 var fecha = idx - dayofweek + 1; // coincide con el 1 ° del mes con la semana // hacer algo más} document.write ('</tr>'); }3. Adjunte el código de calendario JS completo
<script> // juzga si el año en curso es un año bisiesto (hay 29 días en febrero del año bisiesto y solo 28 días en febrero del año normal) ISLEAP (año) {retorno año % 4 == 0? (año % 100! = 0? 1: (año % 400 == 0? 1: 0)): 0; } var i, k, Today = new Date (), // Obtenga la fecha actual y = Today.getTlipyear (), // Obtenga el año en la fecha M = Today.getMonth (), // Obtenga el mes en la fecha (debe tenerse en cuenta que: el mes se calcula desde 0, y el valor obtenido es 1 menos que el valor del mes normal) d = hoy.getDate (), // date table) firstday = new Date(y, m, 1), //Get the first day of the month dayOfWeek = firstday.getDay(), //Judge the day of the week (return one in [0-6], 0 represents Sunday, 1 represents Monday, and so on) days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 31, 31, 30, 31, 31, 30, 31, 31, 30, 31, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), // Cree la matriz de mes str_nums = Math.ceil ((dayofweek + days_per_month [m]) /7); // Determine el número de filas requeridas para la tabla de fecha documento.write ("<table cellPacing = '0'> <tr> <th> day </th> <th> dos </th> <th> dos </th> <th> cuatro </th> <th> Six </th> </tr>"); // imprima la primera fila de la tabla (que muestra la semana) para (i = 0; i <str_nums; i += 1) {// crea una tabla de fechas document.write ('<tr>'); para (k = 0; k <7; k ++) {var idx = 7 * i+k; // Crear un índice para cada tabla, comenzando desde 0 var fecha = idx - dayofweek + 1; // coincide con el 1 ° del mes con la semana (fecha <= 0 || fecha> días_per_month [m])? date = '': date = idx - dayofweek + 1; // El índice es menor o igual a 0 o mayor que el valor máximo del mes, use una tabla vacía en lugar de fecha == D? document.write ('<td>' + date + '</td>'): document.write ('<td>' + date + '</td>'); // resaltar el día} document.write ('</tr>'); } document.write ('</table>'); </script>Juguemos libremente en la parte de CSS. La hora actual es el 2 de mayo de 2016, y las representaciones son las siguientes:
El artículo anterior "El efecto del calendario simple en el día de la escritura JS" es todo el contenido que comparto con ustedes. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.