实时显示系统时间

最新推荐文章于 2023-03-25 00:31:34 发布

abandon_i

最新推荐文章于 2023-03-25 00:31:34 发布

阅读量728

点赞数 1

分类专栏： web前端文章标签： html

本文链接：https://blog.csdn.net/abandon_i/article/details/121682028

版权

web前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时显示系统时间</title>
    <style type="text/css">
    	#c{
    		height: 50px;
    		width: 700px;
    		background: #b5b5b5;
    		border: 0px;
    		position: relative;
    		top: 200px;
    		left: 300px;
    		padding-top: 2px;
    	}
    	li{
    		display: inline-block;    		   		
    		width: 40px;    		
    	}
		#x
		{
			width: 60px;
		}
		
   </style>   
</head>
<body>
<div id="c">
	<ul>
		<li id="y"></li>
		<li>年</li>
		<li id="m"></li>
		<li>月</li>
		<li id="d"></li>
		<li>日</li>		
		<li id="x"></li>
		<li id="h"></li>
		<li>时</li>
		<li id="mm"></li>
		<li>分</li>
		<li id="s"></li>
		<li>秒</li>		
	</ul>
</div>
<script>
    	var dat=new Date();
		var weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
 				var year=document.getElementById("y");
				var mon=document.getElementById("m");
				var day=document.getElementById("d");
				var hour=document.getElementById("h");
				var week=document.getElementById("x");
				var min=document.getElementById("mm");
				var sec=document.getElementById("s");
				setInterval(function(){
					var dat=new Date();
					var d_y=dat.getFullYear();
					var d_m=dat.getMonth()+1;
					var d_d=dat.getDate();
					var d_x=weekArr[dat.getDay()];
					var d_h=dat.getHours();
					var d_mm=dat.getMinutes();
					var d_s=dat.getSeconds();
					
					year.innerHTML=d_y;
					mon.innerHTML=d_m;
					day.innerHTML=d_d;
					week.innerHTML=d_x;
					hour.innerHTML=d_h;
					min.innerHTML=d_mm;
					sec.innerHTML=d_s;
				},1000);
</script>
</body>
</html>

该代码可以实时显示：年，月，日，星期，时，分，秒。

abandon_i

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实时显示系统时间

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实时显示系统时间</title> <style type="text/css"> #c{ height: 100px; width: 800px; background: #b5b5b5; } l.
复制链接

扫一扫