Web前端开发实训案例教程(初级)_第13章 JavaScript基础语法：日期计算器.pptx

第13章JavaScript基础语法：日期计算器;13.1 技能和知识点;（1）通过使用JavaScript实现一个日期计算器。 （2）页面有一个日期选择框，选择日期后单击计算按钮，在下方显示该年的1月1日到当天经过的天数。 （3）功能效果图如下图所示。;1．项目设计 （1）项目名称： dateCal。 （2）项目文件结构如表所示。;2．页面结构 页面结构设计如下图所示。;3．绑定单击事件 “计算”按钮绑定单击事件，调用计算函数Counter。 4．计算函数Counter （1）获取日期选择器的值。 （2）将值切割为“年，月，日”形式的数组。 （3）获取该年1月1日日期对象jan1。 （4）获取该天日期对象now。 （5）计算相差天数days，显示结果。;13.4.1 编写页面 13.4.2 获取日期值 13.4.3 创建日期对象 13.4.4 计算并显示结果;（1）创建项目dateCal。 （2）编写日期计算器页面文件index.html，创建一个日期输入框、一个计算按钮和一个计算结果显示元素。给按钮绑定单击事件，单击时调用方法Counter()。 （3）页面效果如右图所示。 ;（1）在</body>之前添加<script>标签，在<script>标签中定义方法Counter()。 ;（2）使用getElementById()函数通过元素的id属性获取日期输入框的值并打印输出。在日期输入框中选择日期，然后单击计算按钮。查看浏览器开发者工具中Console界面的打印输出。 获取日期值效果如下图所示。 ;（3）使用split方法将日期值切割为字符串数组。单击计算按钮查看Console界面输出。 切割日期值效果如下图所示。 ;（1）使用Date对象分别创建该年1月1日和该天的日期对象并打印输出对象内容。 单击计算按钮后，页面效果如下图所示。;（1）将两个时间对象相减，获得该天日期距离该年的1月1日有多少毫秒。将毫秒转换为天数，并使用innerText属性将结果显示在id为past的<p>标签中。 （2）单击计算按钮后，运行结果页面效果如下图所示。第13章JavaScript基础语法：日期计算器;13.1 技能和知识点;（1）通过使用JavaScript实现一个日期计算器。 （2）页面有一个日期选择框，选择日期后单击计算按钮，在下方显示该年的1月1日到当天经过的天数。 （3）功能效果图如下图所示。;1．项目设计 （1）项目名称： dateCal。 （2）项目文件结构如表所示。;2．页面结构 页面结构设计如下图所示。;3．绑定单击事件 “计算”按钮绑定单击事件，调用计算函数Counter。 4．计算函数Counter （1）获取日期选择器的值。 （2）将值切割为“年，月，日”形式的数组。 （3）获取该年1月1日日期对象jan1。 （4）获取该天日期对象now。 （5）计算相差天数days，显示结果。;13.4.1 编写页面 13.4.2 获取日期值 13.4.3 创建日期对象 13.4.4 计算并显示结果;（1）创建项目dateCal。 （2）编写日期计算器页面文件index.html，创建一个日期输入框、一个计算按钮和一个计算结果显示元素。给按钮绑定单击事件，单击时调用方法Counter()。 （3）页面效果如右图所示。 ;（1）在</body>之前添加<script>标签，在<script>标签中定义方法Counter()。 ;（2）使用getElementById()函数通过元素的id属性获取日期输入框的值并打印输出。在日期输入框中选择日期，然后单击计算按钮。查看浏览器开发者工具中Console界面的打印输出。 获取日期值效果如下图所示。 ;（3）使用split方法将日期值切割为字符串数组。单击计算按钮查看Console界面输出。 切割日期值效果如下图所示。 ;（1）使用Date对象分别创建该年1月1日和该天的日期对象并打印输出对象内容。 单击计算按钮后，页面效果如下图所示。;（1）将两个时间对象相减，获得该天日期距离该年的1月1日有多少毫秒。将毫秒转换为天数，并使用innerText属性将结果显示在id为past的<p>标签中。 （2）单击计算按钮后，运行结果页面效果如下图所示。