- 创建一个HTML文件并添加一个div标签来展示时间信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>实时显示系统时间</title>
</head>
<body>
<div id="time"></div>
</body>
</html>
- 在JavaScript中编写一个函数，该函数可以获取当前时间并将其显示在div标签中。
function showTime() {
const date = new Date(); // 获取当前时间
const hour = date.getHours(); // 小时
const min = date.getMinutes(); // 分钟
const sec = date.getSeconds(); // 秒钟
const timeStr = hour + ':' + min + ':' + sec; // 格式化时间字符串
const timeEl = document.getElementById('time'); // 获取HTML中的div元素
timeEl.innerText = timeStr; // 显示时间
}
- 使用setInterval方法定时更新时间信息。
setInterval(showTime, 1000);
这里的时间间隔设置为1000毫秒，即每秒更新一次时间。
示例1：在网页中展示实时时间
以下是完整的代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>实时显示系统时间</title>
<style>
#time {
font-size: 60px;
text-align: center;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="time"></div>
<script>
function showTime() {
const date = new Date();
const hour = date.getHours();
const min = date.getMinutes();
const sec = date.getSeconds();
const timeStr = hour + ':' + min + ':' + sec;
const timeEl = document.getElementById('time');
timeEl.innerText = timeStr;
}
setInterval(showTime, 1000);
</script>
</body>
</html>
在浏览器打开该HTML文件，即可实时展示当前时间。
示例2：在控制台中打印实时时间
以下是完整的代码实现：
function showTimeConsole() {
const date = new Date();
const hour = date.getHours();
const min = date.getMinutes();
const sec = date.getSeconds();
const timeStr = hour + ':' + min + ':' + sec;
console.log(timeStr);
}
setInterval(showTimeConsole, 1000);
在浏览器控制台打开该JS文件，即可实时打印当前时间。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于JS代码实现实时显示系统时间 - Python技术站
微信扫一扫 
支付宝扫一扫 