js实现简易数码时钟

数码时钟即通过图片数字来显示当前时间；

效果图：

HTML基础样式：

1 <body>
2     <div id="hour1"></div>
3     <div id="hour2"></div><span>:</span>
4     <div id="minute1"></div>
5     <div id="minute2"></div><span>:</span>
6     <div id="second1"></div>
7     <div id="second2"></div>
8 </body>

设置样式：

 1 <style>
 2         div
 3         { 4             width: 200px;
 5             height: 170px;
 6             background-image: url("img/num.png");
 7             float: left;
 8         }
 9         span
10         {11             float: left;
12             font-size: 40px;
13             line-height: 170px;
14         }
15 </style>

获取背景图中每个方块图片的坐标；

 1  var pointArray=[
 2             {x:825,y:170},
 3             {x:0,y:0},
 4             {x:205,y:0},
 5             {x:410,y:0},
 6             {x:615,y:0},
 7             {x:825,y:0},
 8             {x:0,y:170},
 9             {x:205,y:170},
10             {x:410,y:170},
11             {x:615,y:170}
12         ];
13 init();

获取所有div,设置计时器；

 1  function init() {
 2               // 获取所有的div
 3              var hour1=document.getElementById("hour1");
 4              var hour2=document.getElementById("hour2");
 5              var minute1=document.getElementById("minute1");
 6              var minute2=document.getElementById("minute2");
 7              var second1=document.getElementById("second1");
 8              var second2=document.getElementById("second2");
 9              animation();
10                //开启时间间隔运行
11              setInterval(animation,1000);
12         }

获取当前的时间，把当前数字的时间转换为字符；根据当前的时间给当前div设置对应的图片

 1 function animation() {
 2               //获取当前时间,并且把当前时间转换为字符,
 3             var date=new Date();
 4             var hour=getString(date.getHours());
 5             var minutes=getString(date.getMinutes());
 6             var seconds=getString(date.getSeconds());
 7                 //根据现在时间设置当前div的图片
 8             setImg(hour1,hour[0]);
 9             setImg(hour2,hour[1]);
10             setImg(minute1,minutes[0]);
11             setImg(minute2,minutes[1]);
12             setImg(second1,seconds[0]);
13             setImg(second2,seconds[1]);
14         }

 1     //给入数字,如果是小于10的,就加前导0,否则返回这个数字的字符
 2 function getString(num) {
 3      return num<10 ? "0"+num : num.toString();
 4 }
 5
 6     //给入需要改变的div,给入需要改变的值,根据坐标数组中对应的数修改当前图片的坐标位置
 7  function setImg(elem,num) {
 8        elem.style.backgroundPositionX=-pointArray[num].x+"px";
 9        elem.style.backgroundPositionY=-pointArray[num].y+"px";
10   }

利用计时器以及获取日期的方法来完成了简易的电子时钟。

转载于:https://www.cnblogs.com/cx1215/p/11523920.html

js实现简易数码时钟相关推荐

js定时器与数码时钟案例（源码及备注）
js定时器与数码时钟案例开启定时器 1.setInterval 间隔型 setInterval(参数一,参数二); 第一个参数是一个函数,第二个参数是时间(单位是毫秒) 意思就是每隔多长时间执行一次 ...
js实现动态数码时钟
数码时钟在写数码时钟之前,你需要准备0-9数字的图片,你可以自己在网上找,也可以通过ps自己制作喜欢的图片(图片要重命名为"数字".jpg),下面我给大家简单介绍一下,数码时钟的 ...
JS实现简易图片时钟效果
简易图片时钟思路 1.首先创建一个div,在div中有6个img标签,分别代表时分秒. 2.通过dom操作获取这6个img标签. 3.通过new Date()获取时间,根据时间来修改图片的显示. 4 ...
python数码时钟代码_python实现简易数码时钟
最近迷上了Python,要说为什么呢?Python语法简单,功能强大,有广泛的第三方库能快速编程实现自己的想法(无需重复去造轮子).就像某位前辈说的:"人生苦短,学会偷懒-",配置 ...
Python入门——实现简易数码时钟
最近迷上了Python,要说为什么呢?Python语法简单,功能强大,有广泛的第三方库能快速编程实现自己的想法(无需重复去造轮子).就像某位前辈说的:"人生苦短,学会偷懒-",配置 ...
JS制作日历小事件和数码时钟--JavaScript实例集锦（初学）
运用JS的innerHTML,和for循环实现日历小部件内容和日期的转换. <!DOCTYPE html> <html> <head><title>日历 ...
js创建一个显示当前时间的简易小时钟
通过JavaScript的setInterval函数创建一个可以显示当前时间的简易小时钟:(这里只给出了一个最基本的样式,可以添加更多样式美化它!) 浏览器显示结果: 代码实现: <!DOCTY ...
基于JavaScript的数码时钟
用JavaScript+html+css做的一个简易的数码时钟,具有一定的观赏性,Demo效果: 具体步骤如下: 数码时钟的做法思路就是:给出六张图片,分别对应"时分秒"六个数字, ...
[SugerTangYL] 简易电子时钟Verilog设计
目录前言一.简易电子时钟的功能要求二.设计思路&整体框架三.完整代码四.仿真总结前言来分享第一个案例了!简易电子时钟的Verilog设计,电子时钟应该算是走嵌入式和FPGA开发 ...

js实现简易数码时钟

js实现简易数码时钟相关推荐

最新文章

热门文章