js实现电子时钟功能

第js实现电子时钟功能电子时钟是网上常见的功能，在学习date对象和定时器功能时，来完成一个电子时钟的制作是不错的选择。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。

先准备一个html元素，用来放置时钟。新建一个div元素，它的id命名为clock，如下所示：

divid="clock"/div!--基础时钟元素--

本实例电子时钟的格式设定为(yyyy-MM-ddhh:mm:ss)，用js来组合一个简单的时钟字符串放到clock元素中。

本实例把时钟功能封装到函数中，所以先创建一个creatClock函数，在creatClock中再来编写具体代码。

笔者建议在完成某一个前端功能时，应先分析功能的具体操作。再根据具体操作把实现功能的方法分成多个步骤，接下来一个步骤一个步骤去完成它。来看一下用js组合这样一串字符，需要哪些步骤：

1、调用date对象，获取计算机的本地时间

1.1调用date对象

1.2获取当前年份

1.3获取当前月份，月份是从0开始计数，所以需要加1才是正确的月份

1.4获取当前日期

1.5获取当前小时

1.6获取分钟

1.7获取秒数

2、格式化获取到的时间数据

2.1单数字前添加字符串0，用以符合时钟格式

2.2组合时间数据为字符串

3、在clock元素中实时显示时间

3.1获取clock元素

3.2修改clock元素中的时间

3.3使用定时器实时更新时间

具体代码如下：

functionfnCreatClock(){

//声明时间相关变量

vardLocal,nYear,nMonth,nDate,nHours,nMinutes,nSeconds;

//1获取计算机本地时间

functionfnGetDate(){

//1.1调用date对象

dLocal=newDate();

//1.2获取当前年份

nYear=dLocal.getFullYear();

//1.3获取当前月份，月份是从0开始计数，所以需要加1才是正确的月份

nMonth=dLocal.getMonth()+1;

//1.4获取当前日期

nDate=dLocal.getDate();

//1.5获取当前小时

nHours=dLocal.getHours();

//1.6获取分钟

nMinutes=dLocal.getMinutes();

//1.7获取秒数

nSeconds=dLocal.getSeconds();

//2.1封装一个函数，用于把单数字前添加字符串0，例如1改为01

functionfnToDouble(num){

//声明一个返回结果

varsResult='';

if(num10){

//判断数字小于10则是单数字，需要在前面添加字符串0

sResult='0'+num;

}else{

//数字为10以上转换为字符串

sResult=''+num;

}

//返回格式化后的字符串

returnsResult;

functionfnFormatDate(){

//2.2组合时间数据为字符串。本实例主要针对初学者，所以这里用的是最简单的格式化方式，即把所有数据用+号相连

returnnYear+'-'+fnToDouble(nMonth)+'-'+fnToDouble(nDate)+

''+fnToDouble(nHours)+':'+fnToDouble(nMinutes)+':'+fnToDouble(nSeconds);

//3.1获取clock元素

vareClock=document.getElementById('clock');

//获取时间

fnGetDate();

//3.2修改clock元素中的时间

eClock.innerHTML=fnFormatDate();

//使用定时器实时更新时间

setInterval(function(){

//3.3每秒更新时间

fnGetDate();

//3.3修改clock元素中的时间

eClock.innerHTML=fnFormatDate();

},1000);

fnCreatClock();

此时的效果如图所示：

现在做出来的时钟看起来感觉有点简陋，也可以尝试把数字换成图片，这样所呈现效果就会好很多。这里暂时忽略日期部分，只为时间部分添加图片效果，还是先看一下需要哪些html元素，代码如下：

divid="imgClock"!--图片时钟元素--

divid="imgHours"

span/span

span/span

/div

div/div

divid="imgMinutes"

span/span

span/span

/div

div/div

divid="imgSeconds"

span/span

span/span

/div

/div

还需要准备0-9共10张图片，可以在我随教程上传的资源中下载或自己制作。css代码可以自己根据需要编写，也可以复制以下代码使用：

.clock_container{

margin-top:60px;

font-size:0;

text-align:center;

.clock_containerdiv{

display:inline-block;

.clock_container.img_boxspan{

display:inline-block;

width:80px;

height:100px;

margin:02px;

border-radius:8px;

background-color:#77a6b6;

.clock_container.img_0{

background:url(img/img_0.png)no-repeat;

.clock_container.img_1{

background:url(img/img_1.png)no-repeat;

.clock_container.img_2{

background:url(img/img_2.png)no-repeat;

.clock_container.img_3{

background:url(img/img_3.png)no-repeat;

.clock_container.img_4{

background:url(img/img_4.png)no-repeat;

.clock_container.img_5{

background:url(img/img_5.png)no-repeat;

.clock_container.img_6{

background:url(img/img_6.png)no-repeat;

.clock_container.img_7{

background:url(img/img_7.png)no-repeat;

.clock_container.img_8{

background:url(img/img_8.png)no-repeat;

.clock_container.img_9{

background:url(img/img_9.png)no-repeat;

.clock_container.img_point{

width:60px;

height:100px;

background:url(img/img_point.png)no-repeatcenter;

}

按照惯例，完成功能前先整理步骤。这里再多添加一个步骤，在imgClock元素中来完成图片美化后的时钟效果，步骤如下：

4、在imgClock元素中，用图片作为背景实时修改时间

4.1分别获取时(imgHours)、分(imgMinutes)、秒(imgSeconds)元素

4.2根据时间修改时、分、秒元素的class，用来改变背景样式

4.3使用定时器更新元素背景

修改后的代码如下：

functionfnCreatClock(){

//声明时间相关变量

vardLocal,nYear,nMonth,nDate,nHours,nMinutes,nSeconds;

//1获取计算机本地时间

functionfnGetDate(){

//1.1调用date对象

dLocal=newDate();

//1.2获取当前年份

nYear=dLocal.getFullYear();

//1.3获取当前月份，月份是从0开始计数，所以需要加1才是正确的月份

nMonth=dLocal.getMonth()+1;

//1.4获取当前日期

nDate=dLocal.getDate();

//1.5获取当前小时

nHours=dLocal.getHours();

//1.6获取分钟

nMinutes=dLocal.getMinutes();

//1.7获取秒数

nSeconds=dLocal.getSeconds();

//2.1封装一个函数，用于把单数字前添加字符串0，例如1改为01

functionfnToDouble(num){

//声明一个返回结果

varsResult='';

if(num10){

//判断数字小于10则是单数字，需要在前面添加字符串0

sResult='0'+num;

}else{

//数字为10以上转换为字符串

sResult=''+num;

}

//返回格式化后的字符串

returnsResult;

//获取时间

fnGetDate();

//4.1获取图片背景的小时元素

vareImgHours=document.getElementById('imgHours');

//获取小时的第一个元素

vareHours1=eImgHours.getElementsByTagName('span')[0];

//获取小时的第二个元素

vareHours2=eImgHours.getElementsByTagName('span')[1];

//4.1获取图片背景的分钟元素

vareImgMinutes=document.getElementById('imgMinutes');

//获取分钟的第一个元素

vareMinutes1=eImgMinutes.getElementsByTagName('span')[0];

//获取分钟的第二个元素

vareMinutes2=eImgMinutes.getElementsByTagName('span')[1];

//4.1获取图片背景的秒元素

vareImgSeconds=document.getElementById('imgSeconds');

//获取秒的第一个元素

vareSeconds1=eImgSeconds.getElementsByTagName('span')[0];

//获取秒的第二个元素

vareSeconds2=eImgSeconds.getElementsByTagName('span')[1];

//4.2根据时间修改时、分、秒元素的class，用来改变背景样式

functionfnChangeImgBg(){

eHours1.className='img_'+fnGetImgNum(nHours,0);

eHours2.className='img_'+fnGetImgNum(nHours,1);

eMinutes1.className='img_'+fnGetImgNum(nMinutes,0);

eMinutes2.className='img_'+fnGetImgNum(nMinutes,1);

eSeconds1.className='img_'+fnGetImgNum(nSeconds,0);

eSeconds2.className='img_'+fnGetImgNum(nSeconds,1);

//此函数用来计算根据当前时间的数字

functionfnGetImgNum(num,bit){

//声明一个返回结果

varnResult=0;

//判断是个位还是十位，0代表十位，1代表个位

if(bit===0){

//使用Math.floor可以向下取整，即不管是0.1还是0.9，都是取整数0。此方法用来获取时间的十位

nResult=Math.floor(num/10);

}else{

//通过fnToDouble函数把时间格式化双字符串，再取后面一个字符获取个位，前面的+号用于转换为数字

nResult=+fnToDouble(num).slice(1);

}

returnnResult;

fnChangeImgBg();

//使用定时器实时更新时间

setInterval(function(){

//3.3每秒更新时间

fnGetDate();

fnChangeImgBg();

//4.3使用定时器更新元素背景

},1000);

fnCreatClock();

此时的效果比单独的文字还是会增色不少，如图所示：

我想要求效果再漂亮一点，让图片不是很突兀的改变，而是有一个滚动的动画。要实现这样的效果，图片需要改成一张0-9的竖形排列图，也可以从我随教程的资源中下载。通过修改元素背景图片的位置，即可产生滚动的动画效果。

此效果需要的html元素如下所示：

divid="animationClock"!--动画时钟元素--

divid="animationHours"

span/span

span/span

/div

div/div

divid="animationMinutes"

span/span

span/span

/div

div/div

divid="animationSeconds"

span/span

span/span

/div

/div

在css里面给每一个元素加上同一个背景图片，需要加上transition过渡样式用来产生动画效果，如下所示：

.clock_container.animation_boxspan{

display:inline-block;

width:80px;

height:100px;

margin:02px;

border-radius:8px;

background-color:#77a6b6;

background-image:url(img/img_all.png);

background-repeat:no-repeat;

transition:.2s;

}

再随着时间改变给每一个时间元素修改背景图片的位置，即修改background-repeat-y的样式即可。按照惯例，还是先列步骤：

5、在animationClock元素中，滚动动画显示时钟的实时变化

5.1分别获取时(imgHours)、分(imgMinutes)、秒(imgSeconds)元素

5.2根据时间修改时、分、秒元素的背景图片位置

5.3使用定时器更新元素背景图片位置

修改后的代码如下：

functionfnCreatClock(){

//声明时间相关变量

vardLocal,nYear,nMonth,nDate,nHours,nMinutes,nSeconds;

//1获取计算机本地时间

functionfnGetDate(){

//1.1调用date对象

dLocal=newDate();

//1.2获取当前年份

nYear=dLocal.getFullYear();

//1.3获取当前月份，月份是从0开始计数，所以需要加1才是正确的月份

nMonth=dLocal.getMonth()+1;

//1.4获取当前日期

nDate=dLocal.getDate();

//1.5获取当前小时

nHours=dLocal.getHours();

//1.6获取分钟

nMinutes=dLocal.getMinutes();

//1.7获取秒数

nSeconds=dLocal.getSeconds();

//2.1封装一个函数，用于把单数字前添加字符串0，例如1改为01

functionfnToDouble(num){

//声明一个返回结果

varsResult='';

if(num10){

//判断数字小于10则是单数字，需要在前面添加字符串0

sResult='0'+num;

}else{

//数字为10以上转换为字符串

sResult=''+num;

}

//返回格式化后的字符串

returnsResult;

//获取时间

fnGetDate();

//此函数用来计算根据当前时间的数字

functionfnGetImgNum(num,bit){

//声明一个返回结果

varnResult=0;

//判断是个位还是十位，0代表十位，1代表个位

if(bit===0){

//使用Math.floor可以向下取整，即不管是0.1还是0.9，都是取整数0。此方法用来获取时间的十位

nResult=Math.floor(num/10);

}else{

//通过fnToDouble函数把时间格式化双字符串，再取后面一个字符获取个位，前面的+号用于转换为数字

nResult=+fnToDouble(num).slice(1);

}

returnnResult;

//5.1获取动画时钟的小时元素

vareAnimationHours=document.getElementById('animationHours');

//获取小时的第一个元素

vareHours3=eAnimationHours.getElementsByTagName('span')[0];

//获取小时的第二个元素

vareHours4=eAnimationHours.getElementsByTagName('span')[1];

//5.1获取动画时钟的分钟元素

vareAnimationMinutes=document.getElementById('animationMinutes');

//获取分钟的第一个元素

vareMinutes3=eAnimationMinutes.getElementsByTagName('span')[0];

//获取分钟的第二个元素

vareMinutes4=eAnimationMinutes.getElementsByTagName('span')[1];

//5.1获取动画时钟的秒元素

vareAnimationSeconds