欢迎访问优讯网!
您当前的位置:首页 > 爱编程

js实现图片实时时钟

时间:2020-01-16 08:56:54  来源:优讯网  作者:小卡司  浏览次数:
这篇文章主要为大家详细介绍了js实现图片实时时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
 

本文实例为大家分享了js实现图片实时时钟的具体代码,供大家参考,具体内容如下

描述:

将下图作为时间的背景,实现随时时钟的效果。

效果:

代码:

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  div div
  {
   float: left;
   width: 30px;
   font-size: 120px;
  }
  #hours0,#hours1,#minute0,#minute1,#second0,#second1
  {
   width: 200px;
   height: 165px;
   background-image: url("img/sztp.jpg");
  }
 </style>
</head>
<body>
 <div>
  <div id="hours0"></div>
  <div id="hours1"></div>
  <div>:</div>
  <div id="minute0"></div>
  <div id="minute1"></div>
  <div>:</div>
  <div id="second0"></div>
  <div id="second1"></div>
 </div>
<script>
 var hours0,hours1,minute0,minute1,second0,second1;
 var imgPositionList=[];//各数字的位置
  
 init();
 function init() {
  hours0=document.getElementById("hours0");//小时1
  hours1=document.getElementById("hours1");//小时2
  minute0=document.getElementById("minute0");//分钟1
  minute1=document.getElementById("minute1");//分钟2
  second0=document.getElementById("second0");//秒针1
  second1=document.getElementById("second1");//秒针2
  for(var i=0;i<10;i++){ //循环赋值各数字的位置
   if(i<5){    //第一排
    imgPositionList.push({x:-i*208,y:0});
    continue;
   }
   imgPositionList.push({x:-(i-5)*208,y:-173}) //第二排
  
  }
  console.log( imgPositionList);
  imgPositionList.unshift(imgPositionList.pop());
//将0 :最末尾的图片 删除 ,返回的值提到最前面。

  
  setInterval(animation,16);
 }
  
 function animation() {
  var date=new Date();
  var hour=date.getHours().toString().split("").map(function (t)
{ return getNum(t) });

  var minutes=date.getMinutes().toString().split("").map(function (t)
{ return getNum(t) });

  var seconds=date.getSeconds().toString().split("").map(function (t)
{ return getNum(t) });

  
  getDoubleArr(hour);
  getDoubleArr(minutes);
  getDoubleArr(seconds);
  setTimeDiv(hours0,hour[0]);
  setTimeDiv(hours1,hour[1]);
  setTimeDiv(minute0,minutes[0]);
  setTimeDiv(minute1,minutes[1]);
  setTimeDiv(second0,seconds[0]);
  setTimeDiv(second1,seconds[1]);
 }
  
 function getDoubleArr(arr) {  //字符串转化数组
  if(arr.length===1) arr.unshift(0);
  return arr;
 }
 function setTimeDiv(elem,num) {  //时间与图片的对应
  clone(elem.style,{
   backgroundPositionX: imgPositionList[num].x+"px",
   backgroundPositionY: imgPositionList[num].y+"px"
  });
 }
  
 function getNum(str) {
  if(isNaN(Number(str))) return str;
  return Number(str);
 }
 function clone(target,source) {
  for(var key in source){
   target[key]=source[key];
  }
 }
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助

来顶一下
返回首页
返回首页

原文链接:https://www.jb51.net/article/178550.htm


推荐资讯
如何下载旧版centos iso镜像 如何下载迷你mini版的centos镜像
如何下载旧版centos i
计算机的正确使用姿势 电脑痴如何正确的使用电脑
计算机的正确使用姿势
好用的后台管理的前端框架模版H-ui H-ui框架模版分享
好用的后台管理的前端
微信电脑多开方法 无需辅助电脑版微信双开方法分享
微信电脑多开方法 无
相关文章
栏目更新
栏目热门