图片时钟

Posted 2020-10-15 carol72

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];
	}
}