首页 > Web开发 > 详细

原生js用图片做时间

时间:2017-12-29 23:21:36      阅读:249      评论:0      收藏:0      [点我收藏+]

今天写一个时间例子,用图片组成时分秒。具体来看代码,当然今天的写法只是一种,还有很多种实现方法,来看布局:

<p id="times"></p>
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />
<img src="img/0.JPG" />

先默认放上第一张图片,我是提前把图片标号序号从0-9,然后这样依次读取。js代码如下:

<script>
    window.onload=function(){
        var Body=document.body;
        var oP=document.getElementById(‘times‘);
        var aImg = document.getElementsByTagName(‘img‘);
        //把获取出的时间封装为一个函数,方便加定时器让其自动循环
        function Time(){
            var str="";
            var myTime=new Date();
            var iHours = myTime.getHours();
            var iMin = myTime.getMinutes();
            var iSec = myTime.getSeconds();

            str =  toTwo(iHours)+"1"+toTwo(iMin)+"2"+toTwo(iSec);

            oP.innerHTML=str;

            for ( var i=0; i<str.length; i++ ) {
                aImg[i].src = ‘img/‘ + str.charAt(i) + ‘.JPG‘;
                if(i==2 || i==5){//这里做判断添加那个冒号
                    aImg[i].src=‘img/colon.JPG‘
                }

            }

        }
        //加定时器,自动循环
        setInterval(Time,1000);
        Time();

    };
    //这里对单数0-9的判断,让其前面加0
    function toTwo ( n ) {
        return n < 10 ?  ‘0‘ + n : ‘‘ + n;
    }
</script>

效果图如下:

技术分享图片

最后一个数字是一直循环的效果,因为截不了gif图,所以这里说下了,你们可以拷贝代码试试看!

好了,今天就这样了!

原生js用图片做时间

原文:https://www.cnblogs.com/web001/p/8146465.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!