Comment créer un calendrier annuel avec JavaScript-Questions et réponses frontales-php.cn

Comment créer un calendrier annuel avec JavaScript

WBOY

Libérer： 2023-05-12 14:44:08

original

1447 Les gens l'ont consulté

JavaScript est un langage de programmation très populaire qui peut être utilisé pour créer une variété d'applications et de sites Web. L'une des applications les plus utiles consiste à créer un calendrier annuel. Le calendrier annuel est un outil de calendrier qui peut afficher toutes les dates tout au long de l'année. Il est très approprié comme outil pratique de gestion du temps et d'enregistrement, et peut également aider les gens à mieux planifier et organiser les horaires futurs.

Dans cet article, nous présenterons comment créer un calendrier annuel complet en JavaScript, vous permettant d'apprendre et de mettre en pratique des compétences en programmation JavaScript.

Première étape : HTML Skeleton

Pour créer un calendrier annuel complet, vous devez d'abord créer un conteneur dans la page HTML pour placer l'intégralité du calendrier. Ci-dessous se trouve notre squelette HTML :

<!DOCTYPE html>
<html>
<head>
    <title>全年日历</title>
</head>
<body>
    <div class="calendar"></div>
</body>
</html>

Copier après la connexion

Dans ce squelette, nous avons créé un élément DIV appelé "calendrier" qui sera utilisé pour contenir notre calendrier.

Deuxième étape : Styles CSS

Pour rendre notre calendrier agréable et facile à lire, nous devons ajouter des styles CSS. Voici notre code CSS :

.calendar {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    border: 1px solid #ccc;
}
.calendar h1 {
    text-align: center;
}
.calendar table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
}
.calendar table th {
    background-color: #f2f2f2;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    border: 1px solid #ccc;
}
.calendar table td {
    text-align: center;
    font-size: 16px;
    border: 1px solid #ccc;
}
.calendar table td.today {
    background-color: #f2f2f2;
}

Copier après la connexion

Dans le code ci-dessus, nous définissons quelques styles de base pour le conteneur et définissons la bordure des cellules du tableau sur une ligne grise unie de 1 pixel. Nous définissons également certaines couleurs et tailles de police pour les cellules de données du titre, de l’en-tête et du tableau.

Troisième étape : Code JavaScript

Maintenant, nous allons utiliser JavaScript pour générer dynamiquement notre calendrier annuel complet. Nous utiliserons des objets Date pour obtenir et calculer des dates, ainsi que des opérations DOM pour créer et mettre à jour nos éléments HTML. Vous trouverez ci-dessous le code JavaScript complet :

const calendar = document.querySelector('.calendar');
const months = [
    "一月", "二月", "三月",
    "四月", "五月", "六月",
    "七月", "八月", "九月",
    "十月", "十一月", "十二月"
];

// 获取当前日期
const today = new Date();
const currentMonth = today.getMonth();
const currentYear = today.getFullYear();

// 创建并更新标题
const title = document.createElement('h1');
title.textContent = `${currentYear}年`;
calendar.appendChild(title);

// 创建表格
const table = document.createElement('table');
calendar.appendChild(table);

// 创建表头
const thead = document.createElement('thead');
table.appendChild(thead);

const weekdayNames = ["日", "一", "二", "三", "四", "五", "六"];
const tr = document.createElement('tr');
weekdayNames.forEach(day => {
    const th = document.createElement('th');
    th.textContent = day;
    tr.appendChild(th);
});
thead.appendChild(tr);

// 创建并更新表格数据
const tbody = document.createElement('tbody');
table.appendChild(tbody);

// 计算日期并创建表格
for (let month = 0; month < 12; month++) {
    const tr = document.createElement('tr');
    tbody.appendChild(tr);

    for (let weekday = 0; weekday < 7; weekday++) {
        const td = document.createElement('td');
        tr.appendChild(td);

        // 计算日期
        const date = new Date(currentYear, month, 1 + weekday - new Date(currentYear, month, 1).getDay());

        // 添加日期
        if (date.getMonth() === month) {
            td.textContent = date.getDate();
        }

        // 添加类名
        if (today.toDateString() === date.toDateString()) {
            td.classList.add('today');
        }

        // 添加月份标题
        if (weekday === 0) {
            const th = document.createElement('th');
            th.setAttribute('colspan', 7);
            th.textContent = months[month];
            tbody.appendChild(th);
        }
    }
}

Copier après la connexion

Dans le code ci-dessus, nous obtenons d'abord la date actuelle et stockons le mois et l'année en cours. Nous avons ensuite utilisé la manipulation DOM pour créer un titre, un tableau et un en-tête. Ensuite, nous utilisons une boucle imbriquée pour calculer et créer le tableau pour chaque mois. Nous créons d’abord des lignes dans le tableau, puis des cellules dans chaque ligne. Nous utilisons un objet Date pour calculer la date dans chaque cellule et l'ajouter à la cellule. Nous avons également ajouté un nom de classe pour la date actuelle afin de pouvoir modifier son style à l'aide de CSS. Enfin, nous ajoutons un en-tête à la première colonne de chaque mois pour afficher le mois en cours.

Étape 4 : Test

Testons maintenant notre code dans le navigateur. Ouvrez votre navigateur et entrez l'URL du fichier HTML dans la barre d'adresse, et vous devriez voir un joli calendrier annuel avec tous les mois du mois en cours à l'année suivante.

Conclusion

Cet article montre comment créer dynamiquement un calendrier annuel complet à l'aide de JavaScript. Nous utilisons les opérations DOM, les objets Date et CSS pour y parvenir. Apprendre et pratiquer ce projet peut vous aider à améliorer vos compétences en programmation JavaScript et vous fournir un outil pratique de gestion du temps.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!