今天寫一個時間例子，用圖片組成時分秒。具體來看代碼，當然今天的寫法只是一種，還有很多種實現方法，來看布局：

<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用圖片做時間