正文

学会JS轻松显示：电脑屏幕上实时查看当前时间的小技巧

/0 浏览量
0530

在日常生活中，我们常常需要查看时间，尤其是在工作或学习中，实时了解时间可以帮助我们更好地安排日程。今天，我要给大家分享一个小技巧，那就是如何使用JavaScript在电脑屏幕上实时显示当前时间。下面，就让我来一步步教大家如何实现这个功能吧！

准备工作

首先，我们需要一个HTML文件，用来搭建显示时间的舞台。在这个文件中，我们可以创建一个简单的div元素，用于显示时间。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>实时显示当前时间</title>
    <style>
        #clock {
            font-size: 24px;
            font-family: 'Arial', sans-serif;
            color: #333;
            text-align: center;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div id="clock"></div>

    <script src="time.js"></script>
</body>
</html>

JavaScript代码

接下来，我们需要编写JavaScript代码，用来获取当前时间并实时更新到页面上。创建一个名为time.js的文件，并将以下代码粘贴进去：

function updateTime() {
    var now = new Date();
    var hours = now.getHours().toString().padStart(2, '0');
    var minutes = now.getMinutes().toString().padStart(2, '0');
    var seconds = now.getSeconds().toString().padStart(2, '0');
    var timeString = hours + ':' + minutes + ':' + seconds;
    document.getElementById('clock').textContent = timeString;
}

// 设置定时器，每秒更新一次时间
setInterval(updateTime, 1000);

代码解释

  1. updateTime函数：这个函数用来获取当前时间，并将其格式化为HH:mm:ss的形式。我们使用了Date对象来获取当前时间，然后分别获取小时、分钟和秒。使用padStart方法确保时间格式的一致性。

  2. setInterval函数：这个函数用来设置一个定时器，每隔1000毫秒（即1秒）执行一次updateTime函数，从而实现实时更新时间。

测试效果

现在，我们可以打开HTML文件，在浏览器中查看效果。你会看到一个实时更新的时钟，显示着当前的时间。

总结

通过以上步骤，我们成功地在电脑屏幕上实现了实时显示当前时间的小技巧。这个方法简单易行，适合初学者入门。希望这篇文章能帮助你掌握这个技能，让生活更加便捷！

-- 展开阅读全文 --