js课程设计做什么 javascript程序设计基础教程( 二 )

子节点列表
在该列表中我们可知对应案例编写代码，1，3为小时对应的2个DIV；7，9为分钟对应的2个DIV；13，15为秒数对应的DIV 。数组下标确定后就可以获取对应的Div元素使用setAttribute()方法，实现ID属性的设置。
5、计时器设计
为保证能够动态获取本地时间，并将其处理显示的对应DIV层中，需要使用window对象提供的setInterval(func,time)方法，定义触发周期及处理函数。考虑到间隔符号闪烁，我们设置触发之后为500毫秒。在触发函数中实现系统时间获取及与时钟DIV关联动态改变各DIV的ID属性。
实现核心代码及效果展示
按照以上设计思路，我们可以完成该案例开发，案例图片处理使用PhotoShop CC2019，代码编辑使用SublimeText 。实现过程主要包括页面布局设计实现与JavaScript脚本编写的实现。其中页面布局设计使用DIV嵌套实现，代码如下：
页面DIV布局
页面DIV布局代码如上图所示，其中我们可以看到在初始状态下除间隔符dd标签之外，其他的数组部分都为d0，即我们设置的数字0展示。我们为调用背景素材实现背景展示，分别定义了d0~d9用于展示数字，dd标签用于显示间隔符，ds标签用于隐藏间隔符。该部分样式代码如下：
时钟数字与间隔符样式设置
JavaScript脚本部分主要用于获取系统时间，动态实现前端8个展示时钟的DIV层ID标签的设置。在窗体的onload时间中我们获取所有的时钟DIV元素，并启动计时器。实现代码如下：
页面加载事件
页面加载事件如上图所示，其中回调函数setVal用于实现接收本地事件进行DIV层ID标签设置。该函数实现代码如下：
回调函数
处理函数代码如上图所示，自定义函数主要用于实现设置小时、分钟与秒对应的DIV层ID属性值，实现数字与间隔符切换。其中小时处理函数setH()代码描述如下：
小时处理函数代码
其他代码处理与此类似，只是在处理完数字之后设置的nodes元素不同，这里的nodes对象存储了外层ID为test的DIV所有子元素。