JavaScript——在页面上实现一个显示当前时间的动态时钟

矫情吗；* 2024-04-06 12:30 91阅读 0赞

利用setInterval()函数实现动态时钟

setInterval(function() {
    
    }, 1000)//1000毫秒，一秒刷新一次

先声明一个时间对象date()获取系统当前时间

var date = new Date();

再定义时、分、秒来接收系统当前时、分、秒

var hours = date.getHours();//获取当前小时数（0-23）
    var minutes = date.getMinutes();//获取当前分钟数（0-59）
    var seconds = date.getSeconds();//获取当前秒数（0-59）

为了美观时钟使用三目运算符将个位数时分秒都变成多位数

hours = hours > 9 ? hours : "0" + hours;//如果小时数小于9则在数字前面加0使其变成09
    minutes = minutes > 9 ? minutes : "0" + minutes;
    seconds = seconds > 9 ? seconds : "0" + seconds;

使用span标签来显示时间

获取span标签id，使用innerHTML向对象插入内容

全部代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>动态时钟</title>
    	</head>
    	<body>
    		<span id="time"></span><br />
    		
    		<script>
    			// 在页面上实现一个显示当前时间的动态时钟
    
    			setInterval(function() {
    				var date = new Date();
    				var hours = date.getHours();
    				var minutes = date.getMinutes();
    				var seconds = date.getSeconds();
    				hours = hours > 9 ? hours : "0" + hours;
    				minutes = minutes > 9 ? minutes : "0" + minutes;
    				seconds = seconds > 9 ? seconds : "0" + seconds;
    				var currentTime = "现在是" + hours + "时" + minutes + "分" + seconds + "秒"
    				document.getElementById("time").innerHTML = currentTime;
    			}, 1000)
    		</script>
    	</body>
    </html>

效果图

![27fb46b66c6f4c3a8274302d62411048.png][]

[27fb46b66c6f4c3a8274302d62411048.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0921a2640ebd44b9a77027bbb5d72fef.png