课程目标

学习掌握 JavaScript 的内置对象： Date 对象。

阅读

我们先学习一下 Date 对象，来帮助我们接下来的练习。

• W3School Date (opens new window)然后再复习一下 SetTimeout 和 SetInterval
• W3School 定时(opens new window)

编码一

我们现在来做一个最简单的时钟，通过小练习来学习 Date ，复习定时，然后再练习一下函数的封装 具体需求如下：

• 在页面中显示当前日期及时间，按秒更新
• 格式为 YYYY 年 MM 月 DD 日 星期 D HH:mm:ss
• 注意位数的补齐，比如： - 假设时间为 2008 年 10 月 10 日星期一的 12 点 12 分 12 秒，显示 2008 年 10 月 10 日星期一 12:12:12 - 假设时间为 2008 年 1 月 1 日星期一的 3 点 2 分 2 秒，显示 2008 年 01 月 01 日星期一 03:02:02 编码过程中，我们希望你注意对函数的封装，尽量让一个函数就做一个事情，而不要把所有的功能、代码揉在一起：
• 封装一个函数，来根据某个日期返回这一天是星期几
• 封装一个函数，把月、日、小时等出现个位数的情况前面补充 0 ，补充为两位，比如 1 变为 01
• 封装一个函数，把最后的日期时间，按照要求的格式进行包装
• 封装一个函数，判断年份是否为闰年，返回布尔值
• 封装一个函数，判断某年某月的 1 号是星期几
• 可能不止上面这些，尽可能地进行功能的解耦和拆解

编码二

现在我们要做一个稍微复杂的东西，如下 HTML ，有两个 select 下拉框，用于选择年份和月份，在选择后，实现一个万年历的显示。

<select id="year-select">
  <option value="2000">2000</option>
  <option value="2001">2001</option>
  <option value="2002">2002</option>
  ……
  <option value="2032">278</option>
</select>

<select id="month-select">
  <option value="1">1</option>
  <option value="2">2</option>
  ……
  <option value="12">12</option>
</select>
<!--在这里显示日历-->
<div id="calendary"></div>

简易日历实现思路：

• 需要获取当月的天数，获取当月第一天、第 30 天、第 31 天是周几
• 根据是否是闰年以及月份判断此月的天数
• 然后根据此月天数和第一天是星期几，构造万年历的 HTML 内容
• 注意选择不同月份的时候，日期的可选范围不一样，比如 1 月可以选 31 天，11 月只有 30 天，注意闰年
• 同样，需要注意，通过优雅的函数封装，使得代码更加可读且可维护

 编码三

<!-上一个月按钮--->
<button class="prev" onclick="Month('prev')"><</button>
<select id="year-select"> </select>

<select id="month-select"> </select>
<!-下一个月按钮--->
<button class="next" onclick="Month('next')">></button>
<!-跳转按钮--->
<button onclick="now()">今天</button>

<!--在这里显示日历-->
<div id="calendary"></div>

/*
 *实现一个函数显示上一个月或者下一个月
 * 如果传入参数为`prev`，就是显示上一个月
 * 如果传入参数为`next`，就是显示下一个月
 */
function Month(flag) {}
//封装一个函数，实现日历显示今天
function now() {}

参考如下万年历效果图，完善万年历功能。给万年历添加三个按钮，分别实现上一个月，下一个月和今天日历的显示.

• 载入页面后，获取当前的年和月，显示当月日历；当改变年或月时，获取改变后的值，更新日历
• 点击今天，万年历显示今天的年月日信息
• 点击>,万年历显示下一个月，点击<,万年历显示上一个月.
• 根据 HTML 代码，实现所要求的函数功能。

 编码四

基于上一个任务，参考示例图 (opens new window),增加一个重要日子在线倒计时功能。

<!--节日名称-->
<label for="title">Title</label>
<input type="text" id="title" placeholder="What are you counting down to?" />
<label for="date-picker">Select a Date</label>
<!--这里是万年历部分-->
...
<!--提交-->
<button type="submit" onclick="updateCountDown()">Submit</button>
<div class="countdown" id="countdown">
  //这里渲染现在倒计时
</div>

//实现根据选择的日期，计算倒计时，并且每秒更新一次
function updateCountDown() {
  // your complement
}

• 使用上方的 HTML 结构（可以根据需要自行调整）为基础编写 JavaScript 代码
• 添加一个输入框，输入日子的名称，添加一个提交按钮。在万年历后面再添加一个 id 为 countdown的 div 展示在线倒计时
• 在输入框中输入节日名称，利用我们前一个任务做的万年选定年月日，点击提交按钮，在 id 为 countdown 的 div 中更新倒计时的内容
• 如果当前日期，在当前日期之前，就展示现在到明年这个节日的倒计时
• 如果当前日期，在当前日期之之后，就展示现在到今年这个节日的倒计时
• 同样，需要注意，通过优雅的函数封装，使得代码更加可读且可维护
• 如下展示了一个，节日名称为BIRTHDAY的在线倒计时 demo 样例

 提交

把你觉得此次学习中做得最好的代码放在 Github 后进行提交。

 总结

依然把今天的学习用时，收获，问题进行记录。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等