首先說下為什么寫這篇文章宝踪，因為自己在寫圖片時鐘的時候思想走了彎路,所以在這里想先給大家簡單說下正確的思路然后大家想一想再回來看這篇文章眼坏。
構(gòu)思
首先我們要獲取時間（不多說）蜕着，至于怎么把圖片和數(shù)字讓他相關(guān)聯(lián)互纯，我用一個小知識點來解答這個問題，字符串拼接
先來個簡單的布局
<body style="background: #666;">
<h1>北京時間：</h1>
<div id="div1">
<span>年</span>
<span>月</span>
<span>日</span>
</div>
<div id="div2">
<span>時</span>
<span>分鐘</span>
<span>秒</span>
</div>
</body>
js部分把圖片路徑拼接上去就ok了
<script>
window.onload=function(){
function toDu(n){
return n<10?'0'+n:''+n;
}
function aaa(){
let oDiv=document.getElementById('div1');
let oImg=oDiv.getElementsByTagName('img');
let oDiv1=document.getElementById('div2');
let oImg2=oDiv1.getElementsByTagName('img');
let oDate=new Date;
let Y=oDate.getFullYear();
let M=oDate.getMonth()+1;
let D=oDate.getDate();
let H=oDate.getHours();
let oM=oDate.getMinutes();
let S=oDate.getSeconds();
let oD=oDate.getDay();
// oDiv.innerHTML=Y+'年'+M+'月'+D+'日'+H+'時'+oM+'分'+S+'秒'
let oY=Y+toDu(M)+toDu(D);
for(let i=0;i<oImg.length;i++){
oImg[i].src='img/'+oY.charAt(i)+'.png';
}
let oH=toDu(H)+toDu(oM)+toDu(S);
for(let i=0;i<oImg2.length;i++){
oImg2[i].src='img/'+oH.charAt(i)+'.png';
};
};
aaa();
setInterval(aaa,30)
};
</script>
效果如下
image.png
