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 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
element跨分页操作选择详解
Jun 29 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
vue打包时去掉所有的console.log
Apr 10 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
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
详解使用React进行组件库开发
2018/02/06 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
python实现逻辑回归的方法示例
2017/05/02 Python
python求解汉诺塔游戏
2020/07/09 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
会计电算化大学生职业规划书
2014/02/05 职场文书
打架检讨书2000字
2014/02/22 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
Django实现drf搜索过滤和排序过滤
2021/06/21 Python
Python数据结构之队列详解
2022/03/21 Python
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers