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

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

文章插图
所需素材
本数字时钟设计实现格式为00：00：00类型结构的数字时钟，因此需要准备时钟显示相关数字及间隔符号的素材。最终实现效果如下所示：
数字时钟实现效果
设计实现效果如上图，因此需要准备0-9数字与”:”字符，素材设计较为简单直接采用PhotoShop进行设计最终导出保存为png格式图片，素材图片展示如下：
数字及间隔符素材
设计思路
动态数字时钟整体设计按照显示格式要求，使用div展示每一位数字或者间隔符。在计时周期内调用处理函数获取系统当前的时间，并根据当前时间计算出每一个div中应当展示的内容，最终实现时钟的动态效果。主要设计阶段如下：
1、整体HTML页面布局设置
这个阶段主要完成时钟构成的8个DIV的布局设计，为下一步显示时钟提供基础。本例DIV整体布局设计样式效果如下：
时钟布局层
时钟基本布局层描述如上图，为展示我们将其背景设置了不同颜色，后期在8个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显示效果
【js课程设计做什么 javascript程序设计基础教程】在实际实现中由于8个DIV结构是固定的，包含了两个分割符号，这部分可以直接设置为分割符号，如下所示：
带有分割符号的8位显示效果
3、时间获取与处理
该数字时钟时间通过JavaScript提供的Date对象的实例化，获取本地的时间。然后从时间数据中分别读取出小时、分钟、秒。所使用函数主要包括以下函数：
getHours();//用于获取时间对象中的小时数，取值范围0-23getMinutes();//用于获取时间对象中的分钟数，取值范围0-59getSeconds();//用于获取时间对象中的秒数，取值范围0-59
在获取系统时间对应的小时、分钟、秒之后需要确定各部分其中的每一位，由于我们时钟格式是固定的，每一部分均为两位，因此需要对10以内的数字进行判断，如小于10则需要单独补充最高位的0，如果大于等于10，则需要取出其中的十位与个位。个位取值较为简单用获取的值除以10取余数即为个位，十位数字将获取值除以10之后向下取值则可获取10位数字。如数字35，十位计算可得3，个位余数为5 。
4、设置DIV层对应的ID标签
在分别获取小时、分钟、秒对应的每一位之后，可以进一步将其设置显示在对应DIV层中，即设置层的背景。要解决这个问题需要能够精确获取每一个DIV层。借助Document对象我们可以获取所有的层，本例我们将8个展示时钟层，外部嵌套一个层。使用getElementById方法获取该元素，通过该元素的childNodes属性以数组形式获取内部所有的DIV层。这样可以通过数组对应下标分别表示每一个时钟DIV 。注意问题获取的全部子节点除显示时钟的元素节点之外还有文本节点，需要确定哪些是对应的DIV元素节点。使用console.log输出该数组就可以确定，数组输出如下：