JavaScript程序设计(JavaScript前端开发程序设计教程(微课版))-东辰安华生活网

　　JavaScript程序设计(JavaScript前端开发程序设计教程(微课版)),本文通过数据整理汇集了JavaScript程序设计(JavaScript前端开发程序设计教程(微课版))相关信息，下面一起看看。

　　借助JavaScript window对象提供的定时触发函数setInterval，可以设计制作前端动画效果。本例主要介绍基于setInterval方法的简易数字钟的开发实例。

　　所需材料

　　这个数字钟是以00: 00: 00数字钟的格式设计和实现的，所以需要准备材料让钟显示相关的数字和区间符号。最终效果如下：

　　数字钟实现效果

　　设计效果如上图所示，需要准备0-9的数字和“:”字符。材质设计比较简单，直接用PhotoShop设计，最后导出保存为png格式图片。材料图片如下所示：

　　和数字间隔材料。

　　设计理念

　　根据显示格式的要求，数字钟的总体设计采用div来显示每个数字或间隔。在计时周期内调用处理函数得到系统的当前时间，并根据当前时间计算出每个div中应该显示的内容，最终实现时钟的动态效果。主要设计阶段如下：

　　 1.总体HTML页面布局设置

　　此阶段主要完成由时钟组成的八个div的布局设计，为下一步显示时钟提供基础。该DIV的整体布局设计风格效果如下：

　　时钟布局层

　　上图描述了基本的时钟布局层。为了显示它，我们在背景上设置了不同的颜色。在后期，我们使用了八个DIV块来显示与时钟相关的数字和字符。

　　 2.定义ID选择器实现DIV背景设置

　　在这个例子中，数字钟的数字和字符被设置为DIV层的背景进行显示。在这个例子中，ID选择器用于实现0-9数字和分隔符的显示。因为我们的数字钟相关素材都在一个统一的画面中，所以在数字和字符的设置和显示过程中，需要通过background-position属性来精确控制每种样式的背景截取位置。定义9个数字和一个分隔符样式后，可以设置8个时钟显示div对应的ID标签，实现内容显示。例如，如果我们将上述所有时钟布局DIV标签设置为显示数字0的ID标签，效果如下：

　　 ID控制显示内容

　　 ID标签控制DIV的显示内容如上图所示，这样我们可以分别设置8个DIV图层的ID标签值来改变内容。如果我们使用8对应的ID设置，它们都会显示数字8。效果如下：

　　 ID值对应数字8来显示效果。

　　在实际实现中，由于八个DIV结构是固定的，并且包含两个拆分符号，所以这部分可以直接设置为拆分符号，如下所示：

　　带分割符号的8位显示效果

　　 3.时间采集和处理

　　数字时钟时间是通过实例化JavaScript提供的Date对象获得的。然后从时间数据中读出小时、分钟和秒。使用的功能主要包括以下功能：

　　 get hours()；//用于获取time对象中的小时数，范围为0-23 get minutes()；//用于获取time对象中的分钟数，取值范围为0-59 get seconds()；//用于获取time对象中的秒数，范围从0到59。

　　获得系统时间对应的时、分、秒后，需要确定每个部分的每一位。因为我们的时钟格式是固定的，每个部分有两位，所以需要判断10以内的数。如果小于10，0的最高位需要单独补充。如果大于等于10，就要拿出十位一位。每个位的值相对简单。将得到的值除以10得到余数，再将得到的值除以10得到10位数。比如数字是35，可以计算十位数得到3，每个位数的余数是5。

　　 4.设置DIV层对应的ID标签

　　在获取了每一位对应的时、分、秒后，可以在对应的DIV图层中进一步显示其设置，也就是设置图层的背景。为了解决这个问题，我们需要能够准确地获得每个DIV层。在文档对象的帮助下，我们可以得到所有的层。在这个例子中，我们将显示8个时钟层，并在外面嵌套一个层。使用getElementById方法获取元素，通过元素的childNodes属性以数组形式获取所有内部DIV图层。这样，每个时钟DIV都可以由数组的相应下标来表示。请注意，该问题获得的所有子节点除了显示时钟的元素节点之外，还有文本节点。需要确定哪些是相应的DIV元素节点。使用console.log输出数组，数组的输出如下：

　　子节点列表

　　在这个列表中，我们可以知道代码是针对相应的情况编写的，1和3是两个DIV对应于小时；7，9是两个DIV对应分钟；15是对应于秒数的DIV。数组的下标确定后，就可以得到对应的Div元素了。使用setAttribute()方法设置ID属性。

　　 5.定时器设计

　　为了动态获取本地时间并显示在相应的DIV层中，需要使用window对象提供的setInterval(func，time)方法来定义触发周期和处理函数。考虑到间隔符号的闪烁，我们将其设置为触发后500毫秒。在触发函数中，获取系统时间，并且与时钟DIV相关联地动态改变每个DIV的ID属性。

　　核心代码和效果显示的实现

　　根据以上设计思路，我们可以完成案例开发，使用PhotoShop CC2019进行案例图像处理，使用SublimeText进行代码编辑。流程主要包括页面布局设计和JavaScript脚本编写。页面布局设计通过DIV嵌套实现，代码如下：

　　页面分区布局

　　 DIV页面布局代码如上图所示，在图中我们可以看到，在初始状态下，除了spacer dd标签，其他所有数组部分都是d0，也就是显示我们设置的数字0。为了调用背景素材实现背景显示，我们定义了d0~d9显示数字，d d标签显示间隔符，ds标签隐藏间隔符。这部分样式代码如下：

　　时钟和间隔样式设置

　　 JavaScript部分主要用于获取系统时间，动态设置前面八个显示时钟的DIV层ID标签。在表单的onload time中，我们获取所有的时钟DIV元素并启动计时器。实现代码如下：

　　页面加载事件

　　页面加载事件如上图所示，其中使用回调函数setVal接收本地事件并设置DIV层ID标签。功能实现代码如下：