js实现图片实时时钟


Posted in Javascript onJanuary 15, 2020

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

描述:

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

js实现图片实时时钟

效果:

js实现图片实时时钟

代码:

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
JS自定义滚动条效果
Mar 13 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
vue组件中实现嵌套子组件案例
Aug 31 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
js实现中文实时时钟
Jan 15 #Javascript
JS实现音量控制拖动
Jan 15 #Javascript
基于vue.js实现购物车
Jan 15 #Javascript
原生js+css调节音量滑块
Jan 15 #Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 #Javascript
JS函数进阶之继承用法实例分析
Jan 15 #Javascript
JS函数进阶之prototy用法实例分析
Jan 15 #Javascript
You might like
php adodb操作mysql数据库
2009/03/19 PHP
php基础学习之变量的使用
2011/06/09 PHP
php购物车实现方法
2015/01/03 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
javascript第一课
2007/02/27 Javascript
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
python装饰器深入学习
2018/04/06 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
通过cmd进入python的步骤
2020/06/16 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
几款好用的python工具库(小结)
2020/10/20 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
美国汽车交易网站:Edmunds
2016/08/17 全球购物
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
夜不归宿检讨书
2014/02/25 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
学生病假条范文
2015/08/17 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS