数码时钟

数码时钟：也可以称为电子表，是应用实时定时器的典型案例。下面我来为大家介绍一下如何做成以下形式的数码时钟。

（上面所有的数字、文字都是图片形式的。）

（一）首先，我们用HTML语句来搭建一个框架。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>数码时钟</title>
<style>
*{margin:0px; padding:0px;}
body{background:#003; color:white; font-size:50px;}
#title{margin-top:180px;}
</style>
</head><body>
<center><div id="title"><img src="img/title.jpg" alt="超酷时钟"/><br/><img src="img/0.jpg" alt="0"/><img src="img/0.jpg" alt="0"/><img src="img/0.jpg" alt="0"/><img src="img/0.jpg" alt="0"/><img src="img/year.jpg" alt="年"/><img src="img/0.jpg" alt="0"/><img src="img/0.jpg" alt="0"/><img src="img/month.jpg" alt="月"/><img src="img/0.jpg" alt="0"/><img src="img/0.jpg" alt="0"/><img src="img/seven.jpg" alt="日"/><br/><img src="img/0.jpg" alt="0"/><img src="img/0.jpg" alt="0"/>:<img src="img/0.jpg" alt="0"/><img src="img/0.jpg" alt="0"/>:<img src="img/0.jpg" alt="0"/><img src="img/0.jpg" alt="0"/><br/><img src="img/week.jpg" alt="星期"/><img src="img/one.jpg" alt="一"/></div>
</center>
</body>
</html>

（二）使用实时定时器setInterval调整时间。

①首先获取系统时间（年、月、日、时、分、秒、星期），形成字符串。

function toDou(n)
{if(n<10){return '0'+n;}else{return ''+n;}
}

var oDate=new Date();
var iYear=oDate.getFullYear();//年
var iMonth=oDate.getMonth();//月
var iDate=oDate.getDate();//日
var iWeek=(oDate.getDay()+6)%7;//星期
var week_name=["one","two","three","four","five","six","seven"];
var str=''+iYear+toDou(iMonth+1)+toDou(iDate)+toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());

说明：getFullYear( );获取取得是年份（2016：数字），getMonth( );获取的是月份（范围是：0—11，所以比实际月份小1，获取的是数字），getDate( );获取的是几号，getDay( );获取的是星期几（范围：1—7，获取的是：数字）。所以我们需要写一个函数toDou(n)；将数字转换成字符串的形式。

② 接着，我们将字符串插入到相应的位置，并修改相应的图片。

for(var i=1;i<aImg.length;i++)
{switch(i){case 1: case 2: case 3:case 4:aImg[i].src='img/'+str.charAt(i-1)+'.jpg';break;case 6:case 7:aImg[i].src='img/'+str.charAt(i-2)+'.jpg';break;case 9:case 10:aImg[i].src='img/'+str.charAt(i-3)+'.jpg';break;case 12:case 13:case 14:case 15:case 16:case 17:aImg[i].src='img/'+str.charAt(i-4)+'.jpg';break;case 19:aImg[i].src='img/'+week_name[iWeek]+'.jpg';break;default:break;            }       }
}

但是这样得到的是静态的时钟，只能刷新一次更新一次时间，所以，我们需要引入实时定时器（setInterval），让它可以自动更新时间。

③插入实时定时器（setInterval）：我们上述for循环结构包装成一个ticks()函数，然后调用。

var aImg=document.getElementsByTagName("img");function ticks(){var oDate=new Date();var iYear=oDate.getFullYear();//年var iMonth=oDate.getMonth();//月var iDate=oDate.getDate();//日var iWeek=(oDate.getDay()+6)%7;//星期var week_name=["one","two","three","four","five","six","seven"];var str=''+iYear+toDou(iMonth+1)+toDou(iDate)+toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());for(var i=1;i<aImg.length;i++){switch(i){case 1: case 2: case 3:case 4:aImg[i].src='img/'+str.charAt(i-1)+'.jpg';break;case 6:case 7:aImg[i].src='img/'+str.charAt(i-2)+'.jpg';break;case 9:case 10:aImg[i].src='img/'+str.charAt(i-3)+'.jpg';break;case 12:case 13:case 14:case 15:case 16:case 17:aImg[i].src='img/'+str.charAt(i-4)+'.jpg';break;case 19:aImg[i].src='img/'+week_name[iWeek]+'.jpg';break;default:break;         }       }}  setInterval(ticks,1000);

但是，还是存在一点点的小瑕疵，每次打开该页面时，总是有一秒停在初始状态。所以，我们需要在打开该页面时，先运行一下ticks函数。

window.οnlοad=function()
{var aImg=document.getElementsByTagName("img");function ticks(){var oDate=new Date();var iYear=oDate.getFullYear();//年var iMonth=oDate.getMonth();//月var iDate=oDate.getDate();//日var iWeek=(oDate.getDay()+6)%7;//星期var week_name=["one","two","three","four","five","six","seven"];var str=''+iYear+toDou(iMonth+1)+toDou(iDate)+toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());for(var i=1;i<aImg.length;i++){switch(i){case 1: case 2: case 3:case 4:aImg[i].src='img/'+str.charAt(i-1)+'.jpg';break;case 6:case 7:aImg[i].src='img/'+str.charAt(i-2)+'.jpg';break;case 9:case 10:aImg[i].src='img/'+str.charAt(i-3)+'.jpg';break;case 12:case 13:case 14:case 15:case 16:case 17:aImg[i].src='img/'+str.charAt(i-4)+'.jpg';break;case 19:aImg[i].src='img/'+week_name[iWeek]+'.jpg';break;default:break;           }       }}  setInterval(ticks,1000);ticks();
};

下面是完整的代码，希望对大家有帮助。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>数码时钟</title>
<style>
*{margin:0px; padding:0px;}
body{background:#003; color:white; font-size:50px;}
#title{margin-top:180px;}
</style>
<script>function toDou(n){if(n<10){return '0'+n;}else{return ''+n;}} window.οnlοad=function()
{var aImg=document.getElementsByTagName("img");function ticks(){var oDate=new Date();var iYear=oDate.getFullYear();//年var iMonth=oDate.getMonth();//月var iDate=oDate.getDate();//日var iWeek=(oDate.getDay()+6)%7;//星期var week_name=["one","two","three","four","five","six","seven"];var str=''+iYear+toDou(iMonth+1)+toDou(iDate)+toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());for(var i=1;i<aImg.length;i++){switch(i){case 1: case 2: case 3:case 4:aImg[i].src='img/'+str.charAt(i-1)+'.jpg';break;case 6:case 7:aImg[i].src='img/'+str.charAt(i-2)+'.jpg';break;case 9:case 10:aImg[i].src='img/'+str.charAt(i-3)+'.jpg';break;case 12:case 13:case 14:case 15:case 16:case 17:aImg[i].src='img/'+str.charAt(i-4)+'.jpg';break;case 19:aImg[i].src='img/'+week_name[iWeek]+'.jpg';break;default:break;           }       }}  setInterval(ticks,1000);ticks();
};
</script>
</head><body>
<center><div id="title"><img src="img/title.jpg" alt="超酷时钟"/><br/><img src="img/0.jpg" alt="0"/><img src="img/0.jpg" alt="0"/><img src="img/0.jpg" alt="0"/><img src="img/0.jpg" alt="0"/><img src="img/year.jpg" alt="年"/><img src="img/0.jpg" alt="0"/><img src="img/0.jpg" alt="0"/><img src="img/month.jpg" alt="月"/><img src="img/0.jpg" alt="0"/><img src="img/0.jpg" alt="0"/><img src="img/seven.jpg" alt="日"/><br/><img src="img/0.jpg" alt="0"/><img src="img/0.jpg" alt="0"/>:<img src="img/0.jpg" alt="0"/><img src="img/0.jpg" alt="0"/>:<img src="img/0.jpg" alt="0"/><img src="img/0.jpg" alt="0"/><br/><img src="img/week.jpg" alt="星期"/><img src="img/three.jpg" alt="三"/></div>
</center>
</body>
</html>

定时器的应用（三）：数码时钟相关推荐

js定时器与数码时钟案例（源码及备注）
js定时器与数码时钟案例开启定时器 1.setInterval 间隔型 setInterval(参数一,参数二); 第一个参数是一个函数,第二个参数是时间(单位是毫秒) 意思就是每隔多长时间执行一次 ...
定时器的实战--数码时钟
定时器的作用:规定每隔多少时间会做某个事情. 1.开启定时器: setInterval(函数,间隔时间):等一秒中才会执行,间隔型,一旦启动便不会停止. setTimeout(函数,间隔时间):延时型 ...
c语言编程流水灯与交通灯实验,C51单片机实验报告_流水灯_交通灯_定时器_双机交互_时钟.doc...
C51单片机实验报告_流水灯_交通灯_定时器_双机交互_时钟学号: 班级: 自动化10班姓名: 张指导老师: 胡 2012.12 单片机核心板实验要求流水灯实验实验目的: 简单I/O引 ...
基于JavaScript的数码时钟
用JavaScript+html+css做的一个简易的数码时钟,具有一定的观赏性,Demo效果: 具体步骤如下: 数码时钟的做法思路就是:给出六张图片,分别对应"时分秒"六个数字, ...
时钟加闹钟c语言程序,求单片机数码时钟带闹铃的C程序？
数码时钟的程序,应该说很简单,就是通过编程先建立一个时基源,继而获得1秒的时基信号,并累加获得分信号.时信号,至于显示控制,则根据电路原理进行控制即可:当时编写这段程序时,并未加入闹铃功能,原以为闹铃 ...
JavaScript之数码时钟
下面,我就教大家如何利用JavaScript做一个简单的数码时钟. 在做之前我们需要在网上找到从0-9的10张数字图片,保存到一个文件夹里面,并将数字图片对应为相应的数字,作为我们的素材工具. 具体步 ...
面试上机器-将当前时间以数码时钟的方式控制台显示(Java实现)
面试上机器-将当前时间以数码时钟的方式控制台显示(Java实现) 前言毕业近2年了,写下人生中的第一篇:博客,不喜轻喷,不断进步,希望通过文字记录我的程序人生 : 废话此次记录一次面试上机题,将当 ...
js实现动态数码时钟
数码时钟在写数码时钟之前,你需要准备0-9数字的图片,你可以自己在网上找,也可以通过ps自己制作喜欢的图片(图片要重命名为"数字".jpg),下面我给大家简单介绍一下,数码时钟的 ...
JavaScript-定时器的使用之数码时钟
JavaScript-定时器的使用之数码时钟知识点: 1.用JS获取当前时间: 1)Date对象. 2)getFullYear().getMonth()+1.getDate().getDay(). ...

定时器的应用（三）：数码时钟

数码时钟

（一）首先，我们用HTML语句来搭建一个框架。

（二）使用实时定时器setInterval调整时间。

定时器的应用（三）：数码时钟相关推荐

最新文章

热门文章