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