018 数字时钟—date()

最新推荐文章于 2021-06-19 23:43:30 发布

Chary_Simon

最新推荐文章于 2021-06-19 23:43:30 发布

阅读量231

点赞数

本文链接：https://blog.csdn.net/Chary_Simon/article/details/79943235

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>数字时钟</title>
<style>
img{width:60px}
div{width:800px; border:2px #4992E9 solid; position:absolute; left:20%; top:20%; text-align:center;}
input{border:none; width:40px; text-align:right}
</style>
<script>
window.onload = function(){
function ifSingle(n){
	if(n<10){
		return "0"+n; 
		}else{
			return ""+n;
			}
	}
	var aImg = document.getElementsByTagName("img");
    function reOnload(){
			var oDate = new Date();
	        var str= ifSingle(oDate.getHours()) + ifSingle(oDate.getMinutes()) + ifSingle(oDate.getSeconds());

            for(var i=0; i<aImg.length; i++){
		        aImg[i].src = "img/" + str.charAt(i) + ".png";    //处理img[i]的兼容性问题，用charAt()
			}
			var year = oDate.getFullYear();
			var month = oDate.getMonth()+1;
			var date = oDate.getDate();
			
			var day = oDate.getDay();
			
			years.value = year;
			months.value = month;
			dates.value = date;
			days.value = day;
			}	
		setInterval(reOnload,1000)
		reOnload();
		}
</script>
</head>

<body>
<div>
<input id="years" type="text"/>年 
<input id="months" type="text"/>月   
<input id="dates" type="text"/>日         
星期<input id="days" type="text" style="text-align:left"/>
<br /><br />
<img src="img/0.png" alt="1"/>
<img src="img/0.png" alt="2"/>
<font size="+6">:</font>
<img src="img/0.png" alt="3"/>
<img src="img/0.png" alt="4"/>
<font size="+6">:</font>
<img src="img/0.png" alt="5"/>
<img src="img/0.png" alt="6"/>

</div>
</body>
</html>

Chary_Simon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
018 数字时钟—date()

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;数字时钟&lt;/title&gt;&lt;style&gt;img{width:60px}div{width:800px; border:2px #4992E9 solid; position
复制链接

扫一扫