JS实现图文时钟效果

最新推荐文章于 2021-08-17 21:39:26 发布

wxk_前端开发

最新推荐文章于 2021-08-17 21:39:26 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/m0_37058714/article/details/81013946

版权

本文介绍如何利用JavaScript编程实现一个创新的图文时钟效果，通过结合HTML和CSS，将时间显示为图文并茂的形式，提升用户体验。教程详细讲解了时间获取、格式化以及页面元素动态更新的步骤。

摘要由CSDN通过智能技术生成

<body>
<img src="images/0.png" alt="" id="h1" />
<img src="images/0.png" alt="" id="h2"/>
<img src="images/second1.png" alt="" />
<img src="images/0.png" alt="" id="m1"/>
<img src="images/0.png" alt="" id="m2"/>
<img src="images/second1.png" alt="" />
<img src="images/0.png" alt="" id="s1"/>
<img src="images/0.png" alt="" id="s2"/>
    <script type="text/javascript">
    //获取图片
    var oH1=document.getElementById('h1');
    var oH2=document.getElementById('h2');
    var oM1=document.getElementById('m1');
    var oM2=document.getElementById('m2');
    var oS1=document.getElementById('s1');
    var oS2=document.getElementById('s2');
    getTime();
    function  getTime(){
        //获取系统时间
        var date=new  Date();
        var h=date.getHours();
        var m=date.getMinutes();
        var s=date.getSeconds();
        //加零
        h=setNum(h);
        m=setNum(m);
        s=setNum(s);
        //双位数变成单位数(这里的意思是每一个图片代表一个数字不能代替两个数字，因此要把得到的两位数变成一位数)
        h1=h%10;
        h2=parseInt(h/10);
        m1=m%10;
        m2=parseInt(m/10);
        s1=s%10;
        s2=parseInt(s/10);
        //获取图片地址
        oH1.src='images/'+h2+'.png';
        oH2.src='images/'+h1+'.png';
        oM1.src='images/'+m2+'.png';
        oM2.src='images/'+m1+'.png';
        oS1.src='images/'+s2+'.png';
        oS2.src='images/'+s1+'.png';
       setTimeout(getTime,1000);
    }
    function   setNum(num){
        if(num<10){
            num="0"+num;
        }
        return num;
    }
    </script>
</body>

见下图：