美文网首页
js实现图片时钟

js实现图片时钟

作者: 荒炮 | 来源:发表于2017-03-21 09:31 被阅读0次

首先说下为什么写这篇文章,因为自己在写图片时钟的时候思想走了弯路,所以在这里想先给大家简单说下正确的思路然后大家想一想再回来看这篇文章。

构思

首先我们要获取时间(不多说),至于怎么把图片和数字让他相关联,我用一个小知识点来解答这个问题,字符串拼接

先来个简单的布局

<body style="background: #666;">
    <h1>北京时间:</h1>
    <div id="div1">
        ![](img/0.png)
        ![](img/0.png)
        ![](img/0.png)
        ![](img/0.png)
        <span>年</span>
        ![](img/0.png)
        ![](img/0.png)
        <span>月</span>
        ![](img/0.png)
        ![](img/0.png)
        <span>日</span>
    </div>
    <div id="div2">
        ![](img/0.png)
        ![](img/0.png)
        <span>时</span>
        ![](img/0.png)
        ![](img/0.png)
        <span>分钟</span>
        ![](img/0.png)
        ![](img/0.png)
        <span>秒</span>
    </div>
</body>

js部分把图片路径拼接上去就ok了

<script>
    window.onload=function(){
        function toDu(n){
            return n<10?'0'+n:''+n;
        }
        function aaa(){
            let oDiv=document.getElementById('div1');
            let oImg=oDiv.getElementsByTagName('img');
            let oDiv1=document.getElementById('div2');
            let oImg2=oDiv1.getElementsByTagName('img');
            let oDate=new Date;
            let Y=oDate.getFullYear();
            let M=oDate.getMonth()+1;
            let D=oDate.getDate();
            let H=oDate.getHours();
            let oM=oDate.getMinutes();
            let S=oDate.getSeconds();
            let oD=oDate.getDay();
            // oDiv.innerHTML=Y+'年'+M+'月'+D+'日'+H+'时'+oM+'分'+S+'秒'
            let oY=Y+toDu(M)+toDu(D);
            for(let i=0;i<oImg.length;i++){
                oImg[i].src='img/'+oY.charAt(i)+'.png';
            }
            let oH=toDu(H)+toDu(oM)+toDu(S);
            for(let i=0;i<oImg2.length;i++){
                oImg2[i].src='img/'+oH.charAt(i)+'.png';
            };
        };
        aaa();
        setInterval(aaa,30)
    };
</script>

效果如下

image.png

相关文章

  • js实现图片时钟

    首先说下为什么写这篇文章,因为自己在写图片时钟的时候思想走了弯路,所以在这里想先给大家简单说下正确的思路然后大家想...

  • JS代码,实现动态时钟

    js代码,实现动态时钟 function getMyDate(){ var d=new Date(); var m...

  • 2018-07-27

    JS实现图片预加载

  • JS实现网页动态时钟

    问题 我们时常在网页上能看到动态的时间显示,那么是如何实现的呢? 解决方案 原理是利用js的定时效果,每隔0.5s...

  • 原生js实现毫秒拖拽时钟

    最终效果图: 具体代码如下: 转载:JS四步实现毫秒拖拽时钟

  • js时钟特效

    用js实现时钟特效,可以直接复制看效果哟,快来试试吧!

  • web常用库

    js retina.js 实现retina屏幕图片自动替换 slick.js jQuery插件,实现各种轮播图 w...

  • 实现手机淘宝轮播图片放大查看

    实现淘宝的这个功能 实现功能是点击淘宝的图片可以放大,继续轮播. js+html 主要js css就不放图片了,其...

  • 极简风Js时钟

    Js时钟

  • js初识第七节

    实现一个数码时钟的实例 定时器实现 一个特别简单的图片轮播

网友评论

      本文标题:js实现图片时钟

      本文链接:https://www.haomeiwen.com/subject/cuuwnttx.html