1200字范文 > 教你用JavaScript制作小日历

教你用JavaScript制作小日历

时间：2022-08-19 17:23:58

相关推荐

教你用JavaScript制作小日历

案例介绍

欢迎来的我的小院，我是霍大侠，恭喜你今天又要进步一点点了！

我们来用JavaScript编程实战案例，做一个小日历。小日历主要展示年份、月份、星期和日期。通过实战我们将学会getElementById方法、toLocaleString方法和innerText属性。

案例演示

运行程序后会在页面出现一个小日历，日历的月份和星期是由汉字显示，日历的年份和日期是由阿拉伯数字显示。

案例设计

我们来看此案例的思维导图设计，包括需求描述，页面设计和技术架构。

其中架构设计包含了HTML，CSS，JavaScript 共三部分代码。

源码学习

进入核心代码学习，我们先来看HTML中的核心代码。

<div class="calendar-container"><p class="month-name" id="month-name">月份</p><p class="day-name" id="day-name">星期</p><p class="day-number" id="day-number">日</p><p class="year" id="year"></p></div>

然后我们来编写核心的JavaScript代码，通过getElementById获得指定id的对象，也就是当点击三个按钮时，触发增加减少的逻辑功能。

const monthNameEl = document.getElementById("month-name");const dayNameEl = document.getElementById("day-name");const dayNumEl = document.getElementById("day-number");const yearEl = document.getElementById("year");const date = new Date();const month = date.getMonth();monthNameEl.innerText = date.toLocaleString("zh", {month: "long",});dayNameEl.innerText = date.toLocaleString("zh", {weekday: "long",});dayNumEl.innerText = date.getDate();yearEl.innerText = date.getFullYear();