Maison > Article > interface Web > javascript définit le calendrier annuel

javascript définit le calendrier annuel

王林original: 2023-05-21 13:20:07493parcourir

Avec le développement continu de la technologie Internet, de plus en plus de sites Web et d'applications nécessitent des fonctions de calendrier. Dans le développement front-end, JavaScript est l'un des langages les plus couramment utilisés et l'un des moyens courants d'implémenter les fonctions de calendrier. Dans cet article, je vais vous montrer comment configurer un calendrier annuel à l'aide de JavaScript.

Étape 1 : Créer un squelette HTML et des styles CSS

Nous pouvons d'abord créer un squelette HTML et les styles CSS nécessaires. Voici un exemple simple :

<!DOCTYPE html>
<html>
<head>
    <title>年历设置</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .calendar {
            display: flex;
            flex-wrap: wrap;
            padding: 20px;
        }
        .month {
            flex-basis: calc(100% / 4 - 20px);
            margin-right: 20px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 5px #ccc;
        }
        .month-header {
            background-color: #007bff;
            color: #fff;
            padding: 10px;
            font-weight: bold;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        .weekdays {
            display: flex;
            background-color: #efefef;
            padding: 5px;
            border-bottom: 1px solid #ccc;
        }
        .day {
            flex-basis: calc(100% / 7);
            padding: 5px;
            text-align: center;
            border: 1px solid #ccc;
        }
        .today {
            background-color: #007bff;
            color: #fff;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="calendar">
        <!-- 生成的年历内容将在此处添加 -->
    </div>
</body>
</html>

Étape 2 : Utilisez JavaScript pour générer l'almanach

Maintenant, nous pouvons utiliser JavaScript pour générer l'almanach. Voici un exemple de code :

// 获取年份
const year = new Date().getFullYear();

// 获取月份名称
const months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
];

// 生成月历函数
function generateMonth(monthIndex) {
    // 创建月历元素
    const monthElement = document.createElement("div");
    monthElement.classList.add("month");

    // 创建月份名称元素
    const headerElement = document.createElement("div");
    headerElement.classList.add("month-header");
    headerElement.textContent = months[monthIndex];
    monthElement.appendChild(headerElement);

    // 创建星期名称元素
    const weekdaysElement = document.createElement("div");
    weekdaysElement.classList.add("weekdays");
    const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    weekdays.forEach(function(weekday) {
        const weekdayElement = document.createElement("div");
        weekdayElement.classList.add("day");
        weekdayElement.textContent = weekday;
        weekdaysElement.appendChild(weekdayElement);
    });
    monthElement.appendChild(weekdaysElement);

    // 获取当前月份的天数
    const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();

    // 获取当前月份的第一天是星期几
    const firstDayOfWeek = new Date(year, monthIndex, 1).getDay();

    // 生成日期元素
    for (let day = 1; day <= daysInMonth; day++) {
        const dayElement = document.createElement("div");
        dayElement.classList.add("day");
        dayElement.textContent = day;

        // 如果是今天，将其设置为特殊样式
        if (
            year === new Date().getFullYear() &&
            monthIndex === new Date().getMonth() &&
            day === new Date().getDate()
        ) {
            dayElement.classList.add("today");
        }

        monthElement.appendChild(dayElement);
    }

    return monthElement;
}

// 生成12个月的月历
for (let i = 0; i < 12; i++) {
    const monthElement = generateMonth(i);
    document.querySelector(".calendar").appendChild(monthElement);
}

Le code ci-dessus générera un calendrier annuel contenant 12 mois. Dans le code, nous utilisons des objets Date et des fonctions de boucle JavaScript. L'objet Date est utilisé pour obtenir des informations sur la date et l'heure, et la fonction de boucle est utilisée pour générer des éléments de jour de la semaine et des éléments de date.

Étape 3 : Perfectionner le style CSS

Maintenant, nous avons le code HTML et JavaScript de base, mais le style de l'almanach ne répond peut-être pas exactement à nos besoins. Dans cette étape, nous utiliserons CSS pour compléter le style. Voici le code de style CSS complet :

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.calendar {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
}

.month {
    flex-basis: calc(100% / 4 - 20px);
    margin-right: 20px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
}

.month-header {
    background-color: #007bff;
    color: #fff;
    padding: 10px;
    font-weight: bold;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.weekdays {
    display: flex;
    background-color: #efefef;
    padding: 5px;
    border-bottom: 1px solid #ccc;
}

.day {
    flex-basis: calc(100% / 7);
    padding: 5px;
    text-align: center;
    border: 1px solid #ccc;
}

.today {
    background-color: #007bff;
    color: #fff;
    border-radius: 50%;
}

@media only screen and (max-width: 768px) {
    .month {
        flex-basis: calc(100% / 2 - 10px);
        margin-right: 10px;
    }
}

Le code de style ci-dessus remplacera le style par défaut et ajoutera une certaine prise en charge de l'adaptabilité réactive. La requête @media est utilisée pour modifier le style du calendrier mensuel lorsqu'une largeur d'écran spécifique est atteinte.

À ce stade, notre calendrier est complet ! Vous pouvez copier le code ci-dessus dans un fichier HTML et l'ouvrir, puis vous pourrez voir l'almanach que nous venons de générer.

Résumé

Dans cet article, nous vous avons montré comment configurer un calendrier annuel simple à l'aide de JavaScript. Nous avons utilisé des objets Date, des fonctions de boucle et des styles CSS. Grâce à ces méthodes, nous avons réussi à générer un calendrier annuel beau et pratique. J'espère que cet exemple pourra vous inspirer pour votre travail de développement front-end.

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!

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：paramètres d'impression CSSArticle suivant：paramètres d'impression CSS

Articles Liés

Voir plus