Maison > Article > interface Web > Comment créer un calendrier mensuel avec JavaScript

Comment créer un calendrier mensuel avec JavaScript

王林original: 2023-05-16 12:45:08694parcourir

Présentation de la création d'un calendrier mensuel avec JavaScript

JavaScript est un langage de programmation utilisé pour le développement Web. Il s'agit d'un langage de script dynamique généralement utilisé pour le développement Web côté client. Dans cet article, nous expliquerons comment utiliser JavaScript pour créer un calendrier mensuel simple sur une page Web.

Exigences :

Avant de créer le calendrier mensuel, nous avons besoin des fichiers suivants :

1. Un fichier HTML pour créer une interface Web

2. Un fichier CSS pour appliquer des styles aux fichiers HTML

3. pour ajouter un calendrier mensuel

Ensuite, créons un calendrier mensuel à partir de zéro.

Créer un fichier HTML

Créez d'abord un fichier HTML, nous pouvons l'écrire à partir de zéro, ou utiliser un modèle et l'enregistrer en tant que fichier .html. Ajoutez le code suivant au fichier :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>月历</title>
</head>
<body>
    <h1 id="currentMonth">月历</h1>
    <table>
        <thead>
            <tr>
                <th>星期日</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
            </tr>
        </thead>
        <tbody id="calendarBody">
        </tbody>
    </table>

    <script type="text/javascript" src="calendar.js"></script>
</body>
</html>

Dans ce fichier HTML, nous définissons une balise h1 intitulée "Month Calendar" et ajoutons un attribut avec l'identifiant "currentMonth" à l'intérieur de la balise. Cet attribut sera utilisé dans Afficher le mois en cours. en code JavaScript. Nous utilisons également une balise table pour afficher le calendrier. Il y a sept colonnes dans ce tableau, correspondant à la semaine de sept jours. Une balise tbody est utilisée pour générer le tableau du calendrier mensuel en code JavaScript, et nous avons également ajouté une balise script qui contient notre fichier JavaScript qui sera utilisé pour générer le calendrier mensuel de la page.

Nous pouvons également ajouter quelques styles CSS à ce fichier HTML pour embellir la page :

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid black;
    text-align: center;
}

th {
    height: 25px;
    background-color: #cccccc;
}

td {
    height: 50px;
}

Ces styles ajouteront des styles de base aux éléments table, th et td de la page.

Créer un fichier JavaScript

Maintenant, nous devons créer un fichier JavaScript pour ajouter une fonctionnalité de calendrier mensuel à la page. Nous enregistrons ce fichier sous "calendar.js".

Dans ce fichier, nous définissons une fonction pour créer un tableau de calendrier mensuel :

function createCalendar(month, year) {
    var weekdays = ["日","一","二","三","四","五","六"];
    var calendarBody = document.getElementById("calendarBody");
    var daysInMonth = new Date(year, month+1, 0).getDate();
    var date = new Date(year, month, 1);
    var row = document.createElement("tr");

    for (var i = 0; i < weekdays.length; i++) {
        var cell = document.createElement("th");
        cell.innerText = weekdays[i];
        row.appendChild(cell);
    }

    calendarBody.appendChild(row);

    for (var i = 1; i <= daysInMonth; i++) {
        var newDate = new Date(year, month, i);
        var dayOfWeek = newDate.getDay();
        if (dayOfWeek === 0) {
            row = document.createElement("tr");
            calendarBody.appendChild(row);
        }
        var cell = document.createElement("td");
        cell.innerText = i;
        row.appendChild(cell);
    }
}

Dans cette fonction, nous définissons d'abord un tableau pour stocker les noms du dimanche au samedi. Nous avons également obtenu l'élément tbody via la méthode document.getElementById, et obtenu le nombre de jours du mois en cours et la date du premier jour. Ensuite, nous avons créé une ligne d'en-tête de tableau et ajouté une cellule d'en-tête contenant le nom du jour de la semaine dans cette ligne. Ensuite, nous ajoutons des cellules de date ligne par ligne, et si une cellule de date rencontre un dimanche, nous créons une nouvelle ligne.

Ensuite, nous devons ajouter une fonction pour mettre à jour le mois en cours du calendrier mensuel :

function updateCalendar() {
    var currentMonth = document.getElementById("currentMonth");
    var currentDate = new Date();
    var month = currentDate.getMonth();
    var year = currentDate.getFullYear();
    currentMonth.innerText = year + "年" + (month+1) + "月";
    createCalendar(month, year);
}

Dans cette fonction, nous utilisons d'abord la méthode document.getElementById pour obtenir l'élément h1 du mois en cours, puis créons une Date object pour obtenir la date, le mois, l’année actuels et définir l’attribut innerText de l’élément h1.

Enfin, nous devons appeler la fonction updateCalendar pour générer le calendrier mensuel :

window.onload = function() {
    updateCalendar();
}

Ce code appellera la fonction updateCalendar une fois la page complètement chargée.

À ce stade, nous avons terminé la production du calendrier mensuel. Nous pouvons maintenant ouvrir ce fichier HTML dans le navigateur et voir le calendrier mensuel généré.

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!

JavaScript css html date Calendar JS 对象 table tbody td th

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：javascript ajoute une méthode objetArticle suivant：javascript ajoute une méthode objet

Articles Liés

Voir plus