4、设置DIV层对应的ID标签
在分别获取小时、分钟、秒对应的每一位之后 ， 可以进一步将其设置显示在对应DIV层中 ， 即设置层的背景 。要解决这个问题需要能够精确获取每一个DIV层 。借助Document对象我们可以获取所有的层 ， 本例我们将8个展示时钟层 ， 外部嵌套一个层 。使用getElementById方法获取该元素 ， 通过该元素的childNodes属性以数组形式获取内部所有的DIV层 。这样可以通过数组对应下标分别表示每一个时钟DIV 。注意问题获取的全部子节点除显示时钟的元素节点之外还有文本节点 ， 需要确定哪些是对应的DIV元素节点 。使用console.log输出该数组就可以确定 ， 数组输出如下：
子节点列表
在该列表中我们可知对应案例编写代码 ， 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所有子元素 。
【js课程设计做什么 javascript程序设计基础教程】
推荐阅读
- 5000元炒原油赚了十万 做原油把钱亏光了想死
- 感冒期间做核酸检测有用吗
- 感冒了做核酸检测有问题吗
- 感冒了能做核酸检测报告吗
- 感冒期间核酸检测会误诊吗
- 感冒期间核酸检测准吗
- 手机上怎么查询核酸检测结果
- 大规模核酸检测可以出行吗
- 出行必须做核酸检测吗
- 核酸检测健康码上不显示怎么办