案例介绍

欢迎来的我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript编程实战案例,做一个小日历。小日历主要展示年份、月份、星期和日期。通过实战我们将学会getElementById方法、toLocaleString方法和innerText属性。

案例演示

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

案例设计

JavaScript实战案例-小日历<br />我们来看此案例的思维导图设计,包括需求描述,页面设计和技术架构。其中架构设计包含了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">2022</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();

总结思考

学习点 getElementById:根据指定的 id 属性值得到对象。 toLocaleString:用于返回格式化对象后的字符串。 innerText:获取或设置指定元素标记内的文本的值。

问答 1、 getElementById获取对象需要指定什么? 2、toLocaleString返回的是什么? 3、innerText可以设置指定元素标记内的文本的值吗?

关注我,跟着我每天学习一点点,让你不在枯燥,不在孤单..

全网可搜:小院里的霍大侠, 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。