js实现图片时钟
2017-03-21 本文已影响0人
荒炮
首先说下为什么写这篇文章，因为自己在写图片时钟的时候思想走了弯路,所以在这里想先给大家简单说下正确的思路然后大家想一想再回来看这篇文章。
构思
首先我们要获取时间（不多说），至于怎么把图片和数字让他相关联，我用一个小知识点来解答这个问题，字符串拼接
先来个简单的布局
<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
