使用JavaScript实现动态显示当前日期和时间

最新推荐文章于 2024-08-06 23:12:50 发布

lannnn_

最新推荐文章于 2024-08-06 23:12:50 发布

阅读量1.9k

点赞数 2

分类专栏：学习记录文章标签： javascript java 前端 html spring boot

本文链接：https://blog.csdn.net/weixin_53099990/article/details/130820384

版权

学习记录专栏收录该内容

12 篇文章 2 订阅

订阅专栏

该文章演示了如何在HTML页面上创建一个动态显示当前日期和时间的组件。通过JavaScript函数updateClock()获取并格式化时间，然后使用setInterval每秒更新页面上的时间显示。checkTime()函数用于在小时、分钟和秒小于10时在其前面添加前导零。

摘要由CSDN通过智能技术生成

1、新建一个index.html并添加一个用于显示时间的标签

index.html

<!DOCTYPE html>
<html>
<head>
    <title>使用JavaScript实现动态显示当前日期和时间</title>
</head>
<body>
    当前时间:<p id="datetime"></p>
</body>
</html>

2、在同一html文件中添加JavaScript代码实现时间更新

index.html


<script>
    //获取当前日期和时间
    function updateClock() {
        var now = new Date();
        var date = now.toLocaleDateString();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        hours = checkTime(hours);
        minutes = checkTime(minutes);
        seconds = checkTime(seconds);
        document.getElementById('datetime').innerHTML = date + "\t" + hours + ":" + minutes + ":" + seconds;
    }
    // 在数字前面补0
    function checkTime(i) {
        if (i < 10) {
            i = "0" + i
        }  
        return i;
    }
    setInterval(updateClock, 1000);  // 每秒更新一次
</script>

完整代码

index.html

<!DOCTYPE html>
<html>
<head>
    <title>使用JavaScript实现动态显示当前日期和时间</title>
</head>
<body>

    当前时间:<p id="datetime"></p>
    
    <script>
    //获取当前日期和时间
    function updateClock() {
        var now = new Date();
        var date = now.toLocaleDateString();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        hours = checkTime(hours);
        minutes = checkTime(minutes);
        seconds = checkTime(seconds);
        document.getElementById('datetime').innerHTML = date + "\t" + hours + ":" + minutes + ":" + seconds;
    }
    // 在数字前面补0
    function checkTime(i) {
        if (i < 10) {
            i = "0" + i
        }  
        return i;
    }
    setInterval(updateClock, 1000);  // 每秒更新一次
</script>
</body>
</html>