全网最简单，通俗易懂用简单的JavaScript操作实现动态时间（附源码）（源码有注解，步骤不懂的可以看源码）

最新推荐文章于 2024-09-23 22:50:13 发布

Xt_coder

最新推荐文章于 2024-09-23 22:50:13 发布

阅读量1.1k

点赞数 19

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

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

版权

一、想要获取时间，首先要知道JavaScript的时间对象也是内置对象Date

语法

new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

备注：创建一个新Date对象的唯一方法是通过new 操作符，例如：let now = new Date(); 若将它作为常规函数调用（即不加 new 操作符），将返回一个字符串，而非 Date 对象。

value

一个 Unix 时间戳（Unix Time Stamp），它是一个整数值，表示自 1970 年 1 月 1 日 00:00:00 UTC（the Unix epoch）以来的毫秒数，忽略了闰秒。请注意大多数 Unix 时间戳功能仅精确到最接近的秒。

时间戳字符串 dateString

表示日期的字符串值。该字符串应该能被 Date.parse() 正确方法识别（即符合 IETF-compliant RFC 2822 timestamps 或 version of ISO8601）。

year：表示年份的整数值。0 到 99 会被映射至 1900 年至 1999 年，其他值代表实际年份。

monthIndex ：表示月份的整数值，从 0（1 月）到 11（12 月）。

date：表示一个月中的第几天的整数值，从 1 开始。默认值为 1。

hours ：表示一天中的小时数的整数值 (24 小时制)。默认值为 0（午夜）。

minutes ：表示一个完整时间（如 01:10:00）中的分钟部分的整数值。默认值为 0。

seconds ：表示一个完整时间（如 01:10:00）中的秒部分的整数值。默认值为 0。

milliseconds （可选）表示一个完整时间的毫秒部分的整数值。默认值为 0。

1、日期对象使用必须先实例化：创建一个日期对象并且获取时间

2、可以用new关键字，一般称这个操作为实例化

//获取当前日期
const date = new Date()
//获取指定日期
const date = new Date(2020-9-8)

二、日期对象方法-格式化日期对象

Date里面的内置方法
方法	作用	说明
getFullYear()	获取年份	获取四位年份
getMonth()	获取月份	取值为0~11
getDate()	获取月份中的每一天	不同月份取值不同
getDay()	获取星期	取值为0~6 0为星期日）
getHours()	获取小时	取值为0~23
getMinutes()	获取分钟	取值为0~59
getSeconds()	获取秒钟	取值为0~59

了解了这些方法，接下来我们就开始进行时间的编写

步骤：

1、定义一个元素用来放时间

例如：

2、在script里面或者js文件里面，封装函数，格式化时间日期。

 // 1.封装函数，格式化时间日期
    function getDatetime(){
      // 格式化时间日期
      const date = new Date()
      //格式化日期
      const year = date.getFullYear() //得到年
      const month = date.getMonth()+1 //得到月 注意月份是从0开始到11，所以要加1
      const day = date.getDate() //得到日
      // 格式化时间
      const h = date.getHours() //得到小时
      const m = date.getMinutes() //得到分钟
      const s = date.getSeconds() //得到秒
     

      // 2.时间补零（想要补月和日也可以同理补）
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      
      //这里随便选中一个就行，看自己需求
      return `${year}年${month}月${day}号 ${h}点${m}分${s}秒`
      // return `${year}年${month}月${day}号 ${h}:${m}:${s}`
    }

到此就封装完了一个获取时间的函数，可以调用执行

    const result=getDatetime()
    console.log(result)

打开浏览器->控制台

会发现报错了

这个问题原因是在对时间中的小时、分钟、秒钟进行补零时，常量改变了

所以解决这个问题就把小时、分钟、秒钟的const换成let就行

      let h = date.getHours() //得到小时
      let m = date.getMinutes() //得到分钟
      let s = date.getSeconds()//得到秒

接着看控制台，发现时间正确显示了

3、把得到的时间放入到网页div中让其在网页上显示

3.1 获取div元素(class="times")用来放时间

const times=document.querySelector('.times')

3.2 把时间放入获取的div元素里面

times.innerHTML=getDatetime()

成功放入

4、让其动态显示（使用定实器setInterval）

setInterval()

Window 和 Worker 接口提供的 setInterval() 方法重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。

语法

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

参数

func

要重复调用的函数，每经过指定 delay 毫秒后执行一次。第一次调用发生在 delay 毫秒之后。

code

这个语法是可选的，你可以传递一个字符串来代替一个函数对象，你传递的字符串会被编译然后每经过 delay 毫秒执行一次。这个语法因为与 eval() 存在相同的安全风险所以不推荐使用。

delay

是每次延迟的毫秒数（一秒等于 1000 毫秒），函数的每次调用会在该延迟之后发生。如果未指定，则其默认值为 0。参见下方的延迟限制以了解详细的 delay 的取值范围。

arg1, ..., argN 可选

当计时结束的时候，将被传递给 func 函数的附加参数。

4.1 把时间放入定实器重

setInterval(function() {
      times.innerHTML=getDatetime()
    }, 1000);

刷新页面发现可以动态显示了

但是还有一个bug！！！！

页面每次刷新就会出现开始的div里面的内容如下

最后为了解决这个bug就要在定实器前面执行一次

  times.innerHTML=getDatetime() //先执行一次，防止出现原内容
    setInterval(function() {
      times.innerHTML=getDatetime()
    }, 1000);

最后打开浏览器，重复刷新，发现没有问题了，完成时间动态显示

源码：

<!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>
  <div class="times">2024年8月7号 9:1:14</div>

  <script>
    // 1.封装函数，格式化时间日期
    function getDatetime(){
      // 格式化时间日期
      const date = new Date()
      //格式化日期
      const year = date.getFullYear() //得到年
      const month = date.getMonth()+1 //得到月 注意月份是从0开始到11，所以要加1
      const day = date.getDate() //得到日
      // // 格式化时间
      // const h = date.getHours() //得到小时
      // const m = date.getMinutes() //得到分钟
      // const s = date.getSeconds() //得到秒
      let h = date.getHours() //得到小时
      let m = date.getMinutes() //得到分钟
      let s = date.getSeconds()//得到秒

      // 2.时间补零（想要补月和日也可以同理补）
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s

      return `${year}年${month}月${day}号 ${h}点${m}分${s}秒`
      // return `${year}年${month}月${day}号 ${h}:${m}:${s}`
    }
    // const result=getDatetime()
    // console.log(result)
    // //获取div元素用来放时间(class="times")
    const times=document.querySelector('.times')


    // //把时间放入网页div里面，（也可以防止刷新的时候显示上面div里面定义的内容）
    times.innerHTML=getDatetime()
    // // 设置定实执行函数 (每次刷新都会出现上面定义的时间，为了解决这个问题，先让它在外面先执行一次)
    setInterval(function() {
      times.innerHTML=getDatetime()
    }, 1000);



  </script>
</body>
</html>