用JS实现在网页实时显示当前时间

最新推荐文章于 2024-04-29 10:35:43 发布

fgf-2021

最新推荐文章于 2024-04-29 10:35:43 发布

阅读量609

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42303695/article/details/107184527

版权

实时显示当前时间

首先编写简单的html和css

<body>
	<div id="div1">
			
	</div>
</body>

<style type="text/css">
	#div1{width: 600px;height: 100px;border: 1px #000000 solid;margin: 50px auto;}
</style>

写一个显示当前时间的函数
这里主要时设置时间的显示格式，让它更符合我们的阅读习惯。

			function showTime(){
				var d=new Date();
				var year=d.getFullYear();
				var month=d.getMonth()+1;
				var day=d.getDate();
				var week=d.getDay();
				var hours=d.getHours();
				var minutes=d.getMinutes();
				var seconds=d.getSeconds();
				week=numToChinese(week);
				hours=numTotwo(hours);
				minutes=numTotwo(minutes);
				seconds=numTotwo(seconds);
				var str=year+"年"+month+"月"+day+"日 星期"+week+" "+hours+":"+minutes+":"+seconds;
				return str;	
			}
			function numToChinese(n){
				var arr=["日","一","二","三","四","五","六"]
				return arr[n];
			}
			function numTotwo(n){
				if(n>=0&&n<=9){
					return "0"+n;
				}
				else{
					return n;
				}
			}

接下来显示时间到指定区域并实时显示
我们这里要用到一个叫定时器的函数。setInterval

		setInterval(function(){
				var oDiv=document.getElementById("div1");
				oDiv.innerHTML=showTime();
			},1000);

fgf-2021

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JS实现在网页实时显示当前时间

实时显示当前时间首先编写简单的html和css<body> <div id="div1"> </div></body><style type="text/css"> #div1{width: 600px;height: 100px;border: 1px #000000 solid;margin: 50px auto;}</style>写一个显示当前时间的函数这里主要时设置时间的显示格式，让它更符合我们的
复制链接

扫一扫