Eu sempre quis escrever um calendário em JavaScript antes, mas como não tenho boas idéias, não o experimentei há muito tempo. Recentemente, vi um exemplo de um calendário simples escrito em JavaScript na internet. Embora o código não seja grande, acho que explica bem o princípio da implementação do calendário JS. Eu também tentei e ganhei muito. Depois de dominar os princípios básicos de implementação, quero adicionar mais funções e pode reproduzi -lo livremente. Deixe -me compartilhar aqui primeiro. Se você estiver interessado, pode tentar!
1. Problema de contagem de linhas de mesa
Como você deseja exibir a tabela de data, você deve primeiro saber quantas linhas e colunas existem nesta tabela. O número de colunas foi determinado, com um total de 7 colunas do domingo (a primeira coluna no calendário é domingo) a sábado. Antes de resolver o problema da contagem de linhas, você deve primeiro saber que dia do primeiro dia do mês é, porque o primeiro dia de cada mês não começa nos domingos no calendário. Pode ser sexta e sábado, então a parte esquerda do 1º deve ser substituída por uma mesa vazia. Então, quantas tabelas vazias devem ser usadas? Aqui temos que usar o método getDay (), que retorna um número na matriz [0-6], 0 representa domingo, 1 representa segunda-feira, 2 representa terça-feira e assim por diante. Portanto, se o 1º de um mês for sexta -feira, são necessários 5 formas vazias para substituí -las à esquerda. Então, se houver 31 dias em um mês, o último número de linhas a serem encontradas é:
var tr_nums = math.ceil ((5 + 31)/7);
Obviamente, nem todos os meses é de 31 dias, portanto, temos que criar uma matriz de 12 meses, cada elemento representa o número de dias por mês. No entanto, fevereiro é bastante especial. Há 29 dias em fevereiro em um ano bissexto e apenas 28 dias em fevereiro em um ano normal. Portanto, antes de criar uma matriz, você deve criar uma função que junta os anos saltados por si mesmo:
// Se o ano atual puder ser divisível em 4, mas não pode ser divisível por 100 ou pode ser divisível em 400, ele pode ser determinado como um ano bissexto, retornar 1, caso contrário, retorne 0Function Isleap (ano) {Ano de retorno % 4 == 0? (ano % 100! = 0? 1: (ano % 400 == 0? 1: 0)): 0;}Então criamos uma variedade de meses:
var dias_per_month = nova matriz (31, 28 + Isleap (ano), 31, 30, 31, 30, 31, 31, 30, 31);
Isso garante que o número correto de dias seja retirado nos anos comuns e bissextos. O código a seguir é usado para obter informações relevantes para hoje:
var hoje = new Date (), // Obtenha a data atual y = Today.getlyEar (), // Obtenha o ano na data m = Today.getMonth (), // Obtenha o mês na data (deve -se observar que o Mês é calculado a partir do momento, e o valor obtido é 1 menor que o valor normal) D = DATAILE. = new Date(y, m, 1), //Get the first day of the month dayOfWeek = firstday.getDay(), //Judge the day of the week (return to one of [0-6], 0 represents Sunday, 1 represents Monday, and so on) days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31), //Create the month array
Portanto, no final, você pode obter o número de linhas da tabela necessária para o mês:
var str_nums = math.ceil ((Dayofweek + dias_per_month [m]) / 7); // determinar o número de linhas necessárias para a tabela de data
2. Imprima uma tabela de calendário
A tabela em si é uma matriz bidimensional, então deixe o mestre sair e correr dois loops para concluir. O código é o seguinte:
for (i = 0; i <str_nums; i += 1) {// a primeira camada para loop cria tr tag document.write ('<tr>'); for (k = 0; k <7; k ++) {// a segunda camada para loop cria tag td var idx = 7 * i+k; // Crie índice para cada tabela, começando de 0 var date = iDx - DayofWeek + 1; // corresponde ao 1º do mês com a semana // faça outra coisa} document.write ('</tr>'); }3. Anexe o código do calendário JS completo
<Script> // Junte se o ano atual é um ano bissexto (há 29 dias em fevereiro do ano bissexto e apenas 28 dias em fevereiro do ano normal) Função (ano) {Ano de retorno % 4 == 0? (ano % 100! = 0? 1: (ano % 400 == 0? 1: 0)): 0; } var i, k, today = new Date(), //Get the current date y = today.getFullYear(), //Get the year in the date m = today.getMonth(), //Get the month in the date (it should be noted that: the month is calculated from 0, and the obtained value is 1 less than the value of the normal month) d = today.getDate(), //Get the day in the date (to facilitate highlighting the day when creating the 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), // Crie a matriz do mês str_nums = Math.ceil ((Dayofweek + Days_per_month [m]) /7); // Determine o número de linhas necessárias para a tabela de data document.write ("<tabela celularpacing = '0'> <tr> <th> dia </th> <th> dois </th> <th> dois </th> <th> quatro </th> <th> seis </th> </tr>); // imprima a primeira linha da tabela (exibindo a semana) para (i = 0; i <str_nums; i += 1) {// Crie uma tabela de data document.write ('<tr>'); for (k = 0; k <7; k ++) {var idx = 7 * i+k; // Crie um índice para cada tabela, começando a partir de 0 var date = idx - DayofWeek + 1; // corresponde ao 1º do mês com a semana (data <= 0 || Data> Days_per_month [M])? DATE = '': DATE = IDX - DIAFWEEK + 1; // O índice é menor ou igual a 0 ou superior ao valor máximo do mês, use uma tabela vazia em vez de data == D? document.write ('<td>' + date + '</td>'): document.write ('<td>' + date + '</td>'); // Destaque o dia} document.write ('</tr>'); } document.write ('</ table>'); </script>Vamos jogar livremente na parte do CSS. O horário atual é 2 de maio de 2016, e as renderizações são as seguintes:
O artigo acima "O efeito do calendário simples no dia da redação do JS" é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.