原生js用图片做时间

Posted 2020-10-19 麦兜家园

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

<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图，所以这里说下了，你们可以拷贝代码试试看！

好了，今天就这样了！