js时钟正则版

最新推荐文章于 2024-06-06 19:02:54 发布

shenge321

最新推荐文章于 2024-06-06 19:02:54 发布

阅读量664

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/shenge321/article/details/9456925

版权

js 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用HTML与JavaScript结合正则表达式来动态显示当前时间的项目。通过解析本地时间并匹配数字，该程序每秒更新页面上的时间显示，采用图片形式表示小时和分钟。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今年想到用正则来处理时间，做成一个小时钟。

思考了一阵子，觉得还行。贴出了源码。三个浏览器差不多三个样。

<!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>
		<title></title>
		<meta charset="utf-8"/>
		<style type="text/css">
		</style>
		<script type="text/javascript">
			οnlοad=function(){
				show();// 优化启动前一秒无图片。
				var intervalId=setInterval(function(){
					document.body.innerHTML="";// 很暴力，慎用。因为创建的img未绑定事件
					show();
				},1000);
			};
			function show(){
				var t=new Date();
				var time=t.toLocaleTimeString();// 谷歌返回上午和下午时间。
				var n;
				var regex=/\d+/g;// 为什么不跟exec方法。直接跟会造成死循环。
				while(n=regex.exec(time)){
					if(n){
						// 创建两个img,分别存放个位和十位的图片
						var img1=document.createElement("img");
						var img2=document.createElement("img");
						if(n<10){
							img1.setAttribute("src","./img/img_0.png");
							img2.setAttribute("src","./img/img_"+parseInt(n)+".png");
						}else{
							img1.setAttribute("src","./img/img_"+n.toString().charAt(0)+".png");
							img2.setAttribute("src","./img/img_"+n.toString().charAt(1)+".png");
						}
						document.body.appendChild(img1);
						document.body.appendChild(img2);/**/
					}
				};
			};
		</script>
	</head>
	<body>
	</body>
</html>