页面显示当前时间（年月日时分秒）

最新推荐文章于 2025-03-25 22:58:33 发布

野性grow.

最新推荐文章于 2025-03-25 22:58:33 发布

阅读量3.5k

点赞数 16

文章标签： javascript 前端开发语言 html5 css

本文链接：https://blog.csdn.net/m0_74346476/article/details/137027349

版权

本文介绍了两种在HTML页面上使用JavaScript实时显示当前时间的方法，一种是自定义格式化日期并进行数字补0，另一种是利用Date对象的toLocaleString()方法获取格式化的日期和时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：将当前时间以YYYY-MM-DD HH：mm：ss 形式显示在页面。eg：2024/3/25 21:52:40

分析：

1 .调用日期对象方法进行转换

2 .数字补0操作

方法一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
div{
    width: 300px;
    height: 40px;
    border: 1px solid pink;
    text-align: center;
    line-height: 40px;
}
</style>
<body>
    <div></div>
    <script>
        const div =document.querySelector('div');
        function getMyDate(){
            const date = new Date();
            //补0操作
            let h = date.getHours();
            h = h<10? '0' + h : h;
            let m = date.getHours();
            m = m<10? '0' + m : m;
            let s = date.getHours();
            s = s<10? '0' + s : s;
            //字符串拼接
            return `今天是${date.getFullYear()}年 ${date.getMonth()}月 ${date.getDate()}日
             ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
            
        }
        //定时器
        setInterval(function(){
            div.innerHTML = getMyDate()
        },1000)
    </script>
</body>
</html>

方法二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
div{
    width: 300px;
    height: 40px;
    border: 1px solid pink;
    text-align: center;
    line-height: 40px;
}
</style>
<body>
    <div></div>
    <script>
        const div =document.querySelector('div');
        //得到日期对象
        const date = new Date();
        div.innerHTML=date.toLocaleString(); //2024/3/25 21:52:40
        /* div.innerHTML=date.toLocaleDateString(); //2024/3/25
        div.innerHTML=date.toLocaleTimeString();// 21:52:40 */
        //定时器
        setInterval(function(){
            const date = new Date();
            div.innerHTML = date.toLocaleString();
        },1000)
        
    </script>
</body>
</html>