凯的个人博客

day.js第三方时间插件

4/28/2024 js

# 1.日期类型 - day.js

# 基础语法

<script>
    let date = new Date();
    //获取完整年份  yyyy
    let y = date.getFullYear()
    //获取完整月份  0-11  要+1
    let m = date.getMonth()+1
    let d = date.getDay()

    let h = date.getHours()
    let min = date.getMinutes()
    let s = date.getSeconds()

    //添0补齐
    m = m < 10 ? '0'+m:m
    d = d < 10 ? '0'+d:d
    h = h < 10 ? '0'+h:h
    min = min < 10 ? '0'+min:min
    s = s < 10 ? '0'+s:s

    let str = `${y}/${m}/${d} ${h}:${min}:${s}`
    console.log(`${y}/${m}/${d} ${h}:${min}:${s}`);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
格式： 'yyyy/mm/dd hh:mm:ss'
1

# 时间戳应用 15:10

是什么： 将日期格式转换为 了 一种 长度为 13位的数字 Number , 2024-03-13 15:40:54 ===> 1710315654000

​ 时间戳起始时间为 1970-01-01 08:00:00 ==>0

​ java c 秒级时间戳(10位)： 每间隔1s 时间戳的数字 +1

​ js php py 毫秒级时间戳（13位）： 每间隔1ms 时间戳数字+1

作用：

​ 对时间 进行 算数运算 ----> 时间推导

​ 唯一性: 文件上传时 修改文件名，确保不和其他已上传文件重复

# 获取时间戳

1.获取格林威治标准时间格式 数据

2.获取时间戳

//1.获取当前格林威治时间
let date = new Date() ;
//2.获取对应的时间戳
let timer = date.getTime();    // 13位数字

let timer = new Date().getTime()
1
2
3
4
5
6
  • 如果需要获取北京时间的时间戳

0.北京时间转换为 格林威治时间

1.获取格林威治标准时间格式 数据

2.获取时间戳

let BJTime = '2022-05-05 13:05:05'
let date = new Date(BJTime) ;  //格林威治时间
let timer = date.getTime()

let timer = new Date('2022-05-05 13:05:05').getTime()
1
2
3
4
5

# 案例1：

对时间 进行 算数运算 ----> 时间推导

  1. # 求 2021年3月2日 之后的100天日期是多少
<script src="./day.js"></script>
<script>
    //求 2021年3月2日 之后的100天日期是多少 
    let date = new Date('2021-03-02') 
    // 获取该时间对应的时间戳
    let timer = date.getTime();
    console.log(timer);
    // 求 100天后的日期 == 起始时间戳+100天的时间戳(24*60*60*1000) 
    let timer1 = timer+100*(24*60*60*1000);
    console.log(timer1);
    // 将时间戳 转换为 北京时间
    let BJTime = format(timer1);
    console.log(BJTime);
    
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 求 2025年4月2日 前的 1000天 是 星期几
let date = new Date('2025-04-02').getTime();
    let timer = date-1000*(24*60*60*1000)

    let newDate = new Date(timer).getDay()
    console.log(newDate);
1
2
3
4
5
6
7

# dayjs使用与封装

https://dayjs.fenxianglu.cn/

    <script src="https://cdn.jsdelivr.net/npm/dayjs/dayjs.min.js"></script>
    <script>
       let timer =  dayjs().format('YYYY-DD HH:mm:ss')
        console.log(timer);
    </script>
1
2
3
4
5

# 封装实现 17:00

面向对象开发的核心思想：

封装： 将重复的代码 封装位一个一个函数 ：能够拆分重复代码 尽量拆分【充分解耦 保持内聚】

继承：通过父类 子类 继承 已经有的方法和属性

多态：多种调用方式（5种）

dayjs().format()  //格林威治时间格式     // 2020-09-08T13:42:32+08:00
dayjs(参数1).format(参数2) // 参数1：支持时间戳 支持北京时间字符串[可选]   参数2：'YYYY-MM-DD HH:mm:ss'
1
2
  • index.js
// dayjs 是一个函数
// 接收：形参date：北京时间格式 时间戳
// 返回：格林威治时间
// 业务：如果有形参--对应的格林威治时间
//       没有形参---当前时间

function dayjs(date) {
  // Es5 默认值设置
  if (date) {
    return new Date(date);
  }
  return new Date();
}

// format 是一个函数
// 接收：形参1：格林时间【必传】
//   形参2：返回的北京时间的格式 【可选】
//返回：根据格式 返回对应的北京时间
function format(date,mat){

    if(mat == undefined){
        return date;
    }
    if(mat=='YYYY-MM-DD'){
       return getFormatTime(date,1);

    }
    if(mat =='YYYY-MM-DD HH:mm:ss'){
        let str =  getFormatTime(date);
        return str;
    }

    if(mat =='YYYY/MM/DD HH:mm:ss' ){
        return getFormatTime(date,0,'/');
    }
    if(mat =='YYYY=MM=DD HH:mm:ss' ){
        return getFormatTime(date,0,'=');
    }

    if(mat =='HH:mm:ss'){
        return getFormatTime(date,2);
    }
}




// 定义一个内部函数  getFormatTime
// 形参：
//    必填： 格林威治时间  date
//    可选  是否需要完整的时间 0（默认）：返回日期和时间   1：只需要日期  2：只需要时间 every 
//    可选：  日期连接用什么：'-'（默认）  
function getFormatTime(date,every=0,sign='-'){
    let y = date.getFullYear();
    // 获取月份0-11 
    let m = date.getMonth()+1;
    // 获取日期   getDay:获取周几
    let d = date.getDate();
    // 获取小时
    let h = date.getHours();
    // 获取分钟
    let min = date.getMinutes();
    // 获取秒
    let s = date.getSeconds()
    // 添0补齐
    m = m<10?'0'+m:m;
    d = d<10?'0'+d:d;
    h = h<10?'0'+h:h;
    min = min<10?'0'+min:min;
    s = s<10?'0'+s:s;

    //根据形参返回对应的值
    let str = '';
    if(every==0){
        str = `${y}${sign}${m}${sign}${d} ${h}:${min}:${s}`;  
    }
    if(every==1){
        str = `${y}${sign}${m}${sign}${d} `;  
    }
    if(every==2){
        str = `${h}:${min}:${s}`;  
    }

    return str;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
  • index.html
  <script src="./index.js"></script>
    <script>
        let BJTime = format(dayjs(1318781876406), 'YYYY=MM=DD HH:mm:ss')
      
        let BJTime1 = getFormatTime(dayjs(1318781876406),1,'/');  
        
    </script>
1
2
3
4
5
6
7

# 作业：

1.完成 getFormatTime 的封装

  1. 可以多封装一层 format 【可选作业】

  2. 在getFormatTime 原有基础上

      let BJTime = format(dayjs(1318781876406), 'YYYY-MM-DD HH/mm/ss'      
  let BJTime = format(dayjs(1318781876406), 'YYYY/MM/DD HH:mm')
  let BJTime = format(dayjs(1318781876406), 'YYYY/MM/DD 周三')
    1
    2
    3
    //   date  必填： 格林威治时间  
//   model 可选： 是否需要完整的时间 0
//   sign1 可选： 年月日 连接符用什么
//   sign2 可选： 时分秒 连接符用什么

function getFormatTime(date,model,sign1,sign2){
    //获取完整年份  yyyy
    let y = date.getFullYear();
    //获取完整月份  0-11  要+1
    let m = date.getMonth()+1
    let d = date.getDate()

    let h = date.getHours()
    let min = date.getMinutes()
    let s = date.getSeconds()
    //星期几
    let  w = date.getDay()

    //添0补齐
    m = m < 10 ? '0'+m:m
    d = d < 10 ? '0'+d:d
    h = h < 10 ? '0'+h:h
    min = min < 10 ? '0'+min:min
    s = s < 10 ? '0'+s:s

    let str = '';
    
    // 'YYYY-MM-DD HH/mm/ss'
    if(model == 0){
        str = `${y}${sign1}${m}${sign1}${d}  ${h}${sign2}${min}${sign2}${s}`
    }
    // 'YYYY/MM/DD HH:mm'
    else if(model == 1){
        str = `${y}${sign1}${m}${sign1}${d}  ${h}${sign2}${min}`
    }
    // 'YYYY/MM/DD 周三'
    else if(model == 2){
        str = `${y}${sign1}${m}${sign1}${d}  ${w}`
    }
    return str;
}

function dayjs(date) {
    if(date){
        return new Date(date)
    }
    return new Date()
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <!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>
    <!-- <script src="https://cdn.jsdelivr.net/npm/dayjs/dayjs.min.js"></script> -->
    <script src="./01-作业.js"></script>
    <script>
        // function getFormatTime(date,model,sign1,sign2)
        let BJTime1 = getFormatTime(dayjs(1318781876406),0,'-','/')
        console.log(BJTime1);

        let BJTime2 = getFormatTime(dayjs(1318781876406),1,'/',':')
        console.log(BJTime2);

        let BJTime3 = getFormatTime(dayjs(1318781876406),2,'/')
        console.log(BJTime3);
    </script>
</body>
</html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23

#

js事件