通过JS实现页面动态显示时间

原创已于 2022-09-01 19:42:59 修改 · 1.4k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Javascript

于 2022-08-11 21:11:21 首次发布

这篇博客介绍如何使用JavaScript在网页上动态显示当前日期和时间。通过创建一个div元素，并用JavaScript获取当前的年、月、日、星期、小时、分钟和秒，然后更新div的内容来实现动态显示。代码中还包括了将24小时制转换为12小时制的逻辑，以及每秒自动更新时间的功能。

时间显示

1、先添加div

<div id="time"></div>

2、js实现

<script>
			var str;
			var	_time=document.querySelector("#time");
			function test(){
			    var date=new Date();
				var years=date.getFullYear();//年
				var months=date.getMonth();//月
				var d=date.getDate();//日
				var	w=date.getDay();//周
				switch(w){//周转换文字
					case 0:
					w=('星期日');
					break;
					case 1:
					w=('星期一');
					break;
					case 2:
				    w=('星期二');
					break;
					case 3:
					w=('星期三');
					break;
					case 4:
					w=('星期四');
					break;
					case 5:
					w=('星期五');
					break;
					case 6:
					w=('星期六');
					}
				var h=date.getHours();
				 h = h < 10 ? "0"+h:h;
				if(h>12){//12小时制判断上下午
					str="PM";
					h=h-12;
				}else{
					str="AM"; 
				}
				var mm=date.getMinutes();
				mm =mm < 10 ? "0" + mm :mm;
				var s=date.getSeconds();
				s = s < 10 ? "0" + s : s;
					_time.innerText="今天是"+years+"年"+months+"月"+d+"日"+w +h+":"+mm+":"+s+str;
					}
				_time.innerText=setInterval("test()",1000);
		</script>

代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           #time{
               width: 500px;
               height: 100px;
               border: 2px solid red;
               text-align: center;
               line-height: 100px;
               font-size: 25px;
               margin: 0 auto;
           }
       </style>
   </head>
   <body>
       <div id="time"></div>
       <script>
           var str;
           var   _time=document.querySelector("#time");
           function test(){
           var date=new Date();
               var years=date.getFullYear();
               var months=date.getMonth();
               var d=date.getDate();
               var   w=date.getDay();
               switch(w){
                   case 0:
                   w=('星期日');
                   break;
                   case 1:
                   w=('星期一');
                   break;
                   case 2:
               w=('星期二');
                   break;
                   case 3:
                   w=('星期三');
                   break;
                   case 4:
                   w=('星期四');
                   break;
                   case 5:
                   w=('星期五');
                   break;
                   case 6:
                   w=('星期六');
                   }
               var h=date.getHours();
               h = h < 10 ? "0"+h:h;
               if(h>12){
                   str="PM";
                   h=h-12;
               }else{
                   str="AM";
               }
               var mm=date.getMinutes();
               mm =mm < 10 ? "0" + mm :mm;
               var s=date.getSeconds();
               s = s < 10 ? "0" + s : s;
                   _time.innerText="今天是"+years+"年"+months+"月"+d+"日"+w +h+":"+mm+":"+s+str;
                   }
               _time.innerText=setInterval("test()",1000);
       </script>
</body>
</html>

标签

#javascript #前端 #java