数码时钟

最新推荐文章于 2022-10-24 00:00:00 发布

dxm809

最新推荐文章于 2022-10-24 00:00:00 发布

阅读量166

点赞数

分类专栏： JAVASCRIPT

本文链接：https://blog.youkuaiyun.com/dxm809/article/details/104881066

版权

JAVASCRIPT 专栏收录该内容

134 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background-color: orange;
				font-size: 50px;
			}
		</style>
		
		<script>	
			var imgs=null;
			var weekday=null;
			var btn=null;
			window.onload=function(){
				imgs=document.getElementsByTagName('img');
				weekday=document.getElementById('weekday');
				btn=document.getElementById('btn');
				getDateInfo();
				btn.onclick=function(){	
					getDateInfo();
				};
				
				setInterval(getDateInfo,1000);	
			}
			
			
			
			function getDateInfo(){				
				var str=getCurrDateTime();
				for(i=0;i<str.length;i++){
					var ch=str.charAt(i);
					imgs[i].src="img/"+ch+".png";
				}
				var day=getWeekDay();
				weekday.innerHTML=day;	
			}
			
				
			function getCurrDateTime(){
				var str="";
				var date = new Date();
				var year=date.getFullYear();
				var month=date.getMonth()+1;
				var day=date.getDate();
				
				var hour=date.getHours();
				var min=date.getMinutes();
				var sec=date.getSeconds();
				str=""+year+toDoubleDigit(month)+
					toDoubleDigit(day)+
					toDoubleDigit(hour)+
					toDoubleDigit(min)+
					toDoubleDigit(sec);
				return str;
			}
			
			function toDoubleDigit(num){
				if(num<10){
					return "0"+num;
				}
				else{
					return ""+num;
				}
			}
			
				
			function getWeekDay(){
				var date=new Date();
				var day=date.getDay();
				var str="";
				switch(day){
					case 0:
						str= '星期日';
						break;
					case 1:
						str= '星期一';
						break;
					case 2:
						str= '星期二';
						break;
					case 3:
						str= '星期三';
						break;
					case 4:
						str= '星期四';
						break;
					case 5:
						str= '星期五';
						break;
					case 6:
						str= '星期六';
						break;
						
				}
				return str;
			}
			
		</script>
		
	</head>
	<body>
		<input type="button" id='btn' value="update time" />
		<br>
		<img src="img/0.png" />
		<img src="img/0.png" />
		<img src="img/0.png" />
		<img src="img/0.png" />年
		<img src="img/0.png" />
		<img src="img/0.png" />月
		<img src="img/0.png" />
		<img src="img/0.png" />日
		
		<br>
		<img src="img/0.png" />
		<img src="img/0.png" />时
		<img src="img/0.png" />
		<img src="img/0.png" />分
		<img src="img/0.png" />
		<img src="img/0.png" />秒
		<br>
	    <span id='weekday'></span>
	</body>
</html>