[分享]掌握jQuery，轻松获取实时时间！

3. 编写jQuery代码

接下来，我们将编写jQuery代码来获取当前时间，并将其格式化为易读的形式，然后将其显示在之前创建的元素中。

$(document).ready(function() { function updateClock() { var currentTime = new Date(); var hours = currentTime.getHours(); var minutes = currentTime.getMinutes(); var seconds = currentTime.getSeconds(); // 格式化时间，确保两位数 hours = hours < 10 ? '0' + hours : hours; minutes = minutes < 10 ? '0' + minutes : minutes; seconds = seconds < 10 ? '0' + seconds : seconds; // 更新页面上的时间显示 $('#real-time-clock').text(hours + ':' + minutes + ':' + seconds); } // 初始化时钟 updateClock(); // 每秒更新一次时间 setInterval(updateClock, 1000);
});

代码解析

• $(document).ready(function() {...}): 确保在文档完全加载后执行函数内的代码。
• new Date(): 创建一个新的Date对象，代表当前时间。
• getHours(), getMinutes(), getSeconds(): 获取小时、分钟和秒的值。
• 使用三元运算符进行格式化，确保小时、分钟和秒都是两位数。
• $('#real-time-clock').text(...): 设置页面中ID为real-time-clock的元素的文本内容。
• setInterval(updateClock, 1000): 每隔1000毫秒（即1秒）调用updateClock函数，以更新时间。

4. 测试和优化

将上述代码添加到你的HTML文件中，并打开网页进行测试。你应该能看到实时更新的时间。根据需要，你可以进一步优化和美化你的时间显示。

通过使用jQuery，你可以轻松地实现实时时间的显示，这只是一个简单的例子，jQuery的强大功能可以让你创造出更多复杂和有趣的交互效果。