图片时钟
HTML
<p id="timer"></p> <img src="img/0.png"/> <img src="img/0.png"/> <i></i> <img src="img/0.png"/> <img src="img/0.png"/> <i></i> <img src="img/0.png"/> <img src="img/0.png"/>
CSS
*{ margin: 0; padding: 0; } p{ font-size: 60px; } img{ width: 80px; height: 110px; opacity: 1; } i{ display: inline-block; width: 80px; height: 110px; background: url(img/radio.png) no-repeat; background-size: cover; }
JS
var oBody=document.body; var oP=document.getElementById("timer"); var imgs=document.getElementsByTagName("img"); var imgArray=["img/0.png","img/1.png","img/2.png","img/3.png","img/4.png","img/5.png","img/6.png","img/7.png","img/8.png","img/9.png","img/radio.png"]; var Is=document.getElementsByTagName("i"); fnTime(); setInterval(fnTime,1000); function fnTime(){ var myTime=new Date(); var iHours=myTime.getHours();//小时 var iMinutes=myTime.getMinutes();//分 var iSeconds=myTime.getSeconds();//秒 var str=toTwo(iHours)+toTwo(iMinutes)+toTwo(iSeconds); oP.innerHTML=str; //图片切换 for (var i=0;i<imgs.length;i++) { imgs[i].src=imgArray[str.charAt(i)]; } } //小于10补零 function toTwo(n){ if(n<10){ return "0"+n; }else{ return ""+n; } } //点闪动 function shake(obj){ if(getStyle(obj,"opacity")==1){ obj.style.opacity=0; }else{ obj.style.opacity=1; } } setInterval(function(){ setTimeout(shake(Is[0]),30); setTimeout(shake(Is[1]),30); },1000) function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle(attr); }else{ return getComputedStyle(obj)[attr]; } }