js 显示当前时间

在JavaScript中显示当前时间可以通过多种方式实现，以下是一个简单的示例代码，使用HTML和JavaScript来在网页上显示并实时更新当前时间：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示当前时间</title>
<script>
function updateTime() {
    var now = new Date(); // 创建一个Date对象，表示当前时间
    var hours = now.getHours(); // 获取小时
    var minutes = now.getMinutes(); // 获取分钟
    var seconds = now.getSeconds(); // 获取秒数

    // 补零操作，确保时间格式为两位数
    hours = hours < 10 ? '0' + hours : hours;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;

    var timeString = hours + ':' + minutes + ':' + seconds; // 拼接时间字符串
    document.getElementById('timeDisplay').textContent = timeString; // 更新页面上的时间显示
}

// 页面加载完成后开始更新时间，并设置每秒更新一次
window.onload = function() {
    updateTime(); // 立即调用一次，避免页面加载后等待一秒才显示时间
    setInterval(updateTime, 1000); // 每隔1000毫秒（1秒）调用一次updateTime函数
};
</script>
</head>
<body>
<h1>当前时间是：<span id="timeDisplay"></span></h1>
</body>
</html>

在这个示例中，我们定义了一个updateTime函数，它获取当前的小时、分钟和秒数，并格式化为两位数的格式。然后，这个函数将格式化后的时间字符串设置为页面上某个元素的文本内容。

window.onload事件确保在页面加载完成后开始执行updateTime函数，并且使用setInterval函数设置一个定时器，每隔1秒调用一次updateTime函数，以便时间能够实时更新。

这个例子展示了JavaScript的基本用法，包括DOM操作、事件处理和时间格式化。通过这种方式，你可以在网页上显示实时更新的时间。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js 显示当前时间

相关·内容

40_尚硅谷_React全栈项目_动态显示当前时间和天气

Excel技巧4-快速插入当前时间和日期

23_尚硅谷_Vue项目_异步显示当前地地址.avi

41_尚硅谷_React全栈项目_动态显示当前标题

9.得到系统时间并且更新显示.avi

5.显示音乐的名字和演唱者和时间.avi

73-尚硅谷-小程序-音乐实时播放时间格式化显示

021-尚硅谷-尚品汇-通过JS控制二三级分类显示与隐藏

JShaman一键JS代码混淆，并显示前后AST节点数量差异

4.尚硅谷全套JAVA教程—实战项目（71.89GB）/尚硅谷-云尚办公系统/视频/99-尚硅谷-云尚办公系统-员工端审批-显示当前用户信息.mp4

微搭低代码简单功能实现教学视频

如何自己动手做1个智能鱼缸水质监测系统？

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐