html代码实现简单的数码时钟

最新推荐文章于 2024-09-29 17:35:26 发布

梁梁呀呀

最新推荐文章于 2024-09-29 17:35:26 发布

阅读量1.3k

点赞数 3

文章标签： html javascript

本文链接：https://blog.csdn.net/A_liang123/article/details/115016511

版权

本文介绍了一个使用HTML和JavaScript实现的动态时间显示页面。通过获取当前时间并转换为双位数格式，每秒更新页面上的时间显示。该页面利用了自定义函数toDouble来确保时间的每位数字都能正确显示对应的PNG图片。

摘要由CSDN通过智能技术生成

主要代码：可以私信找我要png图片,奥力给！！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function toDouble(n){
	
	if(n<10){
		return '0'+n;
		}
		else{
			return ''+n;
			}
	}
window.onload=function()
 {
	  var aImg=document.getElementsByTagName('img');
	  function tick(){
		  
	  var oDate=new Date();  //时间对象
	  var str=toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds());
	  for(var i=0;i<aImg.length;i++)
	  {
		  aImg[i].src='img/'+str[i]+'.png';
		  }
		  }
		  setInterval(tick,1000);
		  tick();
}
</script>
</head>

<body style="background:black; color:white; font-size:50px;">
<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" />
</body>
</html>