JS在页面动态显示日期与时间

万物皆可联……

已于 2022-08-06 10:34:53 修改

阅读量1.8k

点赞数

分类专栏： JS 文章标签： javascript 开发语言 ecmascript

于 2022-08-06 10:34:38 首次发布

本文链接：https://blog.youkuaiyun.com/qq_35354139/article/details/126190661

版权

JS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用JavaScript实现动态显示当前时间，包括转换为12小时制、判断上午下午并添加相应标识，以及补全小时数前的0。

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

1.小时按12小时制，不足两位的前面补0
2.根据获取的时间，判断上下午，用am，pm表示

<div id="wrapper"></div>

用于显示时间

CSS代码

			#wrapper{
				font-size: 50px;
				font-weight: bold;
			}

JS代码

var _wrapper = document.getElementById("wrapper"); //获取div
			
			function test(){
				var date=new Date();  //新建时间对象
				var nian = date.getFullYear(); //获取年
				var yue = date.getMonth()+1;  //获取月
				var ri = date.getDate();  //获取日
				var xq = date.getDay();   //获取星期 
				var xs = date.getHours();  //获取小时
				var fz = date.getMinutes();  //获取分钟
				var m = date.getSeconds(); // 获取秒
				var sd; 
				var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
                //判断上下午
				if(xs>12){
					sd="pm";
				}else if(xs<12){
					sd="am";
				}
                //12小时制
				if(xs>12){
					xs=xs-12;
				}
                //补0
			    if(xs<10){
					xs = "0"+xs;
				}
				if(m<10){
					m = "0"+m;
				}
				if(fz<10){
					fz = "0"+fz;
				}
                //页面输出
				_wrapper.innerHTML=`今天是${nian}年${yue}月${ri}日&ensp;${weekday[xq]}&ensp;${xs}:${fz}:${m}&ensp;${sd}`;
			}
			setInterval("test()",1000); //定时器

搜索

复制