前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【JavaScript】内置对象 - Date 日期对象 ② ( 日期格式化 | 获取年 - getFullYear | 获取月 - getMonth | 获取每月的第几天 - getDate )

【JavaScript】内置对象 - Date 日期对象 ② ( 日期格式化 | 获取年 - getFullYear | 获取月 - getMonth | 获取每月的第几天 - getDate )

作者头像
韩曙亮
发布2024-05-04 08:31:04
820
发布2024-05-04 08:31:04
举报

Date 日期对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date

一、日期格式化


1、获取年 - getFullYear

调用 Date.prototype.getFullYear() 方法 可以获取指定日期的年份 ;

  • Date 是 JavaScript 的内置对象 , 用于处理日期和时间 ;
  • prototype 是 JavaScript 中 每一个对象都有一个 prototype 属性 , 该属性 是 指向原型对象的指针 , 原型对象 包含可以由特定类型的所有实例共享的属性和方法 ;
  • getFullYear 是一个定义在 Date 的原型对象上的方法 , 所以所有的 Date 对象实例都可以调用这个方法 ;

参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear 文档 ;

调用 Date 构造函数 , 创建一个新的 Date 对象时 , 该新对象会继承 Date 的 原型对象 上的所有属性和方法 ;

代码示例 :

代码语言:javascript
复制
        // 1. 创建 Date 内置对象 , 参数为空
        var date = new Date();

        // 打印创建的 Date 对象
        // 输出 : 2024
        console.log(date.getFullYear());

执行结果 :

2、获取月 - getMonth

调用 Date.prototype.getMonth() 方法 可以获取指定日期的月份 ;

获取的是一个 0 ~ 11 之间的数值 , 0 表示 1 月 , 11 表示 12 月 ;

参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getMonth 文档 ;

代码示例 :

代码语言:javascript
复制
        // 1. 创建 Date 内置对象 , 参数为空
        var date = new Date();
        
        // 输出 : 3
        console.log(date.getMonth());

这个月是 4 月 , 调用 Date 对象的 getMonth 方法 , 输出的日期的月份是 3 ;

3、获取每月的第几天 - getDate

调用 Date.prototype.getDate() 获取 指定日期对象 是一个月中的哪一天 , 返回值取值范围 1 ~ 31 ;

参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate

代码示例 :

代码语言:javascript
复制
        // 1. 创建 Date 内置对象 , 参数为空
        var date = new Date();

        // 输出 : 26
        console.log(date.getDate());

今天是 2024 年 4 月 26 号 , getDate 函数 返回的就是 26 ;

4、获取每周的第几天 - getDay

调用 Date.prototype.getDay() 获取 指定日期对象 是一个星期中的哪一天 , 返回值取值范围 0 ~ 6 , 0 表示星期天 , 1 表示星期一 , 5 表示星期五 ;

参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay

代码示例 :

代码语言:javascript
复制
        // 1. 创建 Date 内置对象 , 参数为空
        var date = new Date();

        // 输出 : 5
        console.log(date.getDay());

今天是星期五 , 输出 5 ;

5、获取每天的第几小时 - getHours

调用 Date.prototype.getHours() 获取 一个 0 到 23 之间的整数值 ;

参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getHours

代码示例 :

代码语言:javascript
复制
        // 1. 创建 Date 内置对象 , 参数为空
        var date = new Date();

        // 输出 : 22
        console.log(date.getHours());

6、完整代码示例

代码示例 :

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // Date 内置对象

        // 1. 创建 Date 内置对象 , 参数为空
        var date = new Date();

        // 打印创建的 Date 对象
        // 输出 : 2024
        console.log(date.getFullYear());

        // 输出 : 3
        console.log(date.getMonth());

        // 输出 : 26
        console.log(date.getDate());

        // 输出 : 5
        console.log(date.getDay());

        // 输出 : 22
        console.log(date.getHours());

        var array = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        console.log('日期格式化 : ' +
            date.getFullYear() + " 年 " +
            (date.getMonth() + 1) + " 月 " +
            date.getDate() + " 日 " +
            array[date.getDay()]);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

代码语言:javascript
复制
2024
3
26
5
22
日期格式化 : 2024 年 4 月 26 日 星期五
本文参与?腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2024-05-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客?前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、日期格式化
    • 1、获取年 - getFullYear
      • 2、获取月 - getMonth
        • 3、获取每月的第几天 - getDate
          • 4、获取每周的第几天 - getDay
            • 5、获取每天的第几小时 - getHours
              • 6、完整代码示例
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档


              http://www.vxiaotou.com