Js实现图片做的实时时钟_js时钟_SSSkyCong的博客-程序员秘密

描述：

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

效果：

代码：

<!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://blog.csdn.net/qlwangcong518/article/details/85055327

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

io---BufferedOutputStream_flush-缓冲区写出字节时的缓冲区问题_outputstream怎么开启缓冲区_biu_biubiubiu的博客-程序员秘密

package io;import java.io.BufferedOutputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;/**缓冲区写出字节时的缓冲区问题@author W*/public class Buff...

（转）[kaili linux]安装kaili linux到VM_jameskaron的博客-程序员秘密

转自：http://www.yishimei.cn/network/782.htmlkaili linux iso:https://www.kali.org/downloads/上次给大家介绍了关于黑客专用系统Kali Linux后，有许多小伙伴都表现出了极大的兴趣，但是想要彻底深入的学习Kali Linux，不仅要知道它的用途与大概介绍，更要亲身实践才能学到真正的黑客技能，考虑到...

JVM(三)--垃圾收集算法_想飞的盗版鱼的博客-程序员秘密

JVM(三)–垃圾收集算法这篇博客的内容包括：一、垃圾收集算法：1，标记——清除算法：2，复制算法：3，标记——整理算法：4，分代收集算法：二、涉及到的问题：1，标记清除，标记整理，复制算法分别是什么，各有什么缺点2，新生代和老年代各用什么算法？3，为什么要划分新生代和老年代？4，新生代分为什么？年轻代为什么分为Eden和Survior区？5，新生代和老年代的年龄阈值是多少？初识GC自动垃圾回收机制，简单来说就是寻找 Java堆中的无用对象。打个比方：你的房间是

adb实用命令（持续更新中....）_潇曜的博客-程序员秘密

1、获取手机屏幕当前显示的activity名与所属的包名：adb shell dumpsys window windows | findstr Current【延伸阅读】有人会有疑问：adb shell dumsys后面可以接哪些参数呢？其实很简单，我们在cmd中输入以下命令：adb shell service list，就会显示可以显示的参数：Found 178 services:0 ...

互联网产品设计进阶（10）关注项目的赢利模式_cndes的博客-程序员秘密

互联网产品设计进阶（10）关注赢利模式整天都在思考项目的进展，忙碌了一天，终于有点时间来打理思绪。晚上收到一封快件，收到一位编辑朋友送来的几本书，里面有一本最近比较热门的《设计原本》。读一本书时，我喜欢看书的前言，因为这里反映了作者的原始动机。正如书中所写，“思维的过程、人与人的

webpack配置: 如何同时使用ES2015和JSX_weixin_34281477的博客-程序员秘密

为什么80%的码农都做不了架构师？>>> ...