Js实现图片做的实时时钟

最新推荐文章于 2024-01-31 16:02:42 发布

SSSkyCong

最新推荐文章于 2024-01-31 16:02:42 发布

阅读量988

点赞数

分类专栏： H5 学习-总结-转载 Js

本文链接：https://blog.csdn.net/qlwangcong518/article/details/85055327

版权

学习-总结-转载同时被 3 个专栏收录

136 篇文章 0 订阅

订阅专栏

127 篇文章 2 订阅

订阅专栏

111 篇文章 1 订阅

订阅专栏

描述：

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

效果：

代码：

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

SSSkyCong

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
Js实现图片做的实时时钟

描述：将下图作为时间的背景，实现随时时钟的效果。效果：代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style
复制链接

扫一扫