案例数码时钟

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="div">
			<img src="../img/0.png" />
			<img src="../img/8.png" /> 时
			<img src="../img/1.png" />
			<img src="../img/5.png" /> 分
			<img src="../img/0.png" />
			<img src="../img/8.png" /> 秒
		</div>
	</body>

</html>
<script type="text/javascript">
var imgArr = document.getElementsByTagName("img");
//设置函数,如果获取到的时间<10,就在它前面加上字符“0”,比如获取到的小时为5,那么输出就是“05”
function add(i){
	if(i<10){
	return "0"+i;
}else{
	return ""+i;
}
}
setInterval(function(){
	var time=new Date();
	var hour=time.getHours();
	var min=time.getMinutes();
	var sec=time.getSeconds();
	hour=add(hour);
	min=add(min);
	sec=add(sec);
	var str=hour+min+sec;
	for(var i=0;i<imgArr.length;i++){
		imgArr[i].src="../img/"+str.charAt(i)+".png";//charAt(i)获取某字符串的第i个字符
	}
},1000);
	
	
</script>

   命名是0.jpg  1.jpg  数字是几,与图片相对应

猜你喜欢

转载自blog.csdn.net/qq_38068491/article/details/82973369