手把手教程，用JavaScript简单实现动态显示时间详细步骤（附详细源码）

Xt_coder

已于 2024-08-06 23:13:49 修改

阅读量323

点赞数 9

分类专栏：前端 js 动态时间文章标签： javascript 开发语言前端 html5 json

于 2024-08-06 23:12:50 首次发布

本文链接：https://blog.csdn.net/qq_69932108/article/details/140966497

版权

前端同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

动态时间

1 篇文章 0 订阅

订阅专栏

一、首先创建一个HTML元素(可以说是‘容器’)

1.1 这里我选择用h1元素（看着比较大）（也可以用其他的元素比如div）

里面的格式为自己输入 2024-08-06 21:06:30 代表年月日和小时、分钟、秒钟。

二、用js操作获取元素对象

2.1 获取元素h1

const timeEl=document.querySelector('.time')

注意：上面这个代码要放在<script> </script>里面，或者放到单独的js文件（记得要引入）

2.2 创建一个时间函数 new Data（）获取当前时间

const date = new Date()

2.3 把当前时间放入h1(timeEl中)元素内，通过textContent属性

timeEl.textContent=date

运行代码，到浏览器查看可获得如下图所示：

接着需要转为看得懂的数字继续改为

timeEl.textContent=date.toISOString()

得到：

还不是我们想要的效果

2.4 自己拿年、月、日及其小时、分钟、秒钟。

 const year=date.getFullYear()
    const month =date.getMonth()
    const day = date.getDate()
    const hour = date.getHours()
    const minute = date.getMinutes()
    const second=date.getSeconds()

2.5 自己拼接到刚刚的 timeEl.textContent= 的后面

 timeEl.textContent=`${year}-${month}-${day} ${hour}:${minute}:${second}`

得到：

还是有弊端，就是7月应该为07，及其06，单个数字之前要补充0（当然也可以不补充）

2.6 运用js提供的padStart方法来解决这个加零问题

padStart() 方法用另一个字符串填充当前字符串（如果需要会重复填充），直到达到给定的长度。填充是从当前字符串的开头开始的

例如以下例子：

const str1 = '5';

console.log(str1.padStart(2, '0'));
// Expected output: "05"

输出的为：05

所以就可以完善上面的加零问题（因为要是string类型才能够直接使用，所以用了+''）

    const month =(date.getMonth()+'').padStart(2,'0')
    const day = (date.getDate()+'').padStart(2,'0')
    const hour = (date.getHours()+'').padStart(2,'0')
    const minute = (date.getMinutes()+'').padStart(2,'0')
    const second=(date.getSeconds() + '').padStart(2,'0')

得到：

三、把获取的所有时间相关的放入定实器中(setInterval中)

语法：后面的delay为时间（以毫秒为单位）

var intervalID = setInterval(func, [delay, arg1, arg2, ...]);
var intervalID = setInterval(function[, delay]);
var intervalID = setInterval(code, [delay]);

放入定实器中：

 setInterval(function(){
    //获取当前具体时间 并且进行格式化
    const date = new Date()
    const year=date.getFullYear()
    const month =(date.getMonth()+'').padStart(2,'0')
    const day = (date.getDate()+'').padStart(2,'0')
    const hour = (date.getHours()+'').padStart(2,'0')
    const minute = (date.getMinutes()+'').padStart(2,'0')
    const second=(date.getSeconds() + '').padStart(2,'0')

    //把时间函数放入获取的元素timeEl里面
    timeEl.textContent=`${year}-${month}-${day} ${hour}:${minute}:${second}`
    
    },1000)

保存后得到动态时间了

完成！！

上述可能有些描述不太规范或者不准确，大家也可以去查找 mdn 文档的来查看，up能力有限只能把自己理解的简单讲解。

源码：

<!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>
  <body>
    <h1 class="time">2024-08-06 21:06:30</h1>

    <script>
      //获取元素
      const timeEl = document.querySelector(".time");

      setInterval(function () {
        //获取当前具体时间 并且进行格式化
        const date = new Date();
        const year = date.getFullYear();
        const month = (date.getMonth() + "").padStart(2, "0");
        const day = (date.getDate() + "").padStart(2, "0");
        const hour = (date.getHours() + "").padStart(2, "0");
        const minute = (date.getMinutes() + "").padStart(2, "0");
        const second = (date.getSeconds() + "").padStart(2, "0");
        //把时间函数放入获取的元素timeEl里面
        timeEl.textContent = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      }, 1000);
      
    </script>
  </body>
</html>