JavaScript Date 对象

1.获取时间

使用new Date()来获取时间对象，默认是当前时间
时间对象可以调用一系列方法来获取其对应的到年月日，时分秒等（返回的数据类型是number类型）
注意：月份是以0开始的，即0代表一月份

<script>
    //获取当前时间
    var date = new Date()
    console.log(date)//Wed Dec 11 2019 14:24:02 GMT+0800 (中国标准时间)

    //获取年-月-日
    console.log(date.getFullYear())//2019
    console.log(date.getMonth()) //11 (0~11)
    console.log(date.getDate())//11

    //获取星期
    console.log(date.getDay())//3 (0~6) 0就是礼拜天

    //获取时-分-秒
    console.log(date.getHours()) //14
    console.log(date.getMinutes())//24
    console.log(date.getSeconds())//2

    //获取1970 年 1 月 1 日至今的毫秒数，一般用于对比2个时间点的差距
    console.log(date.getTime())//1576046149784

    //值的类型
    console.log(typeof date.getHours())//number
    console.log(typeof date.getTime())//number

    //时间转换
    console.log(date.toLocaleString())//2019/12/11 下午2:24:02
    console.log(date.toString())//Wed Dec 11 2019 14:24:02 GMT+0800 (中国标准时间)
</script>

2.设置日期

在new Date()后可以通过一系列的方法来修改时间日期
可以修改年月日时分秒，修改与获取的API相似，只要将get替换成set即可
注意：月份是以0开始的，即0代表一月份

<script>
    //创建时间
    var date = new Date()
    console.log(date.toLocaleString())//2019/12/11 下午2:58:52
    
    //修改年-月-日
    date.setFullYear(2020)
    date.setMonth(1)//(0~11)
    date.setDate(1)
    console.log(date.toLocaleString())//2020/2/1 下午2:58:52

    //修改时-分-秒
    date.setHours(15)// (0 ~ 23)
    date.setMinutes(16)
    date.setSeconds(17)
    console.log(date.toLocaleString())//2020/2/1 下午3:16:17

    //修改星期 ！！没有这方法！！！

    //以毫秒设置 Date 对象。
    date.setTime(1576046149784)
    console.log(date.toLocaleString())//2019/12/11 下午2:35:49
</script>

如果参数值溢出，时间对象会自动换算

<script>
    //时间对象，当前时间
    var date = new Date()
    console.log(date.toLocaleString()) //2024/3/25 15:04:33
    //往后延16天
    var target_date = date.getDate() + 16
    console.log(target_date) //41 25+16=41
    //设定日期
    date.setDate(target_date)
    console.log(date.toLocaleString()) //2024/4/10 15:04:33
</script>

3.时间初始化

使用new Date()创建时间对象时，可以传入字符串来设定对应的时间，但是字符串的格式有兼容问题

//这两种格式主流支持
new Date('2024-03-24')
new Date('2024,03,24')
//IE只支持以下格式
new Date('2024/03/24')

//转换成IE支持的格式
var dateStr = "2013-3-15 20:20:03"
//格式转换
var reg = /-/g
var dateFormat = dateStr.replace(reg,"/")

4.封装格式化时间函数

通过原生的方式获取到时间对象对应的年月日时分秒，进行组合后返回

transformDateMethod(dateobj,format=''){
    var year = dateobj.getFullYear()
    var month = dateobj.getMonth()+1
    var date = dateobj.getDate()
    var hours = dateobj.getHours()
    var minutes = dateobj.getMinutes()
    var seconds = dateobj.getSeconds()
    var day = dateobj.getDay()
    var day_str = ''
    switch(day){
        case 0: day_str = '星期日';break;
        case 1: day_str = '星期一';break;
        case 2: day_str = '星期二';break;
        case 3: day_str = '星期三';break;
        case 4: day_str = '星期四';break;
        case 5: day_str = '星期五';break;
        case 6: day_str = '星期六';break;
        default: break;
    }

    //两位数补全，这里可以使用 '5'.padStart(2,'0') 方法完成同样的效果
    if(hours < 10){
        hours = '0'+hours
    }
    if(minutes < 10){
        minutes = '0'+minutes
    }
    if(seconds < 10){
        seconds = '0'+seconds
    }
    
    //输入格式判断
    if(format == ''){
        //默认格式
        return `${year}年${month}月${date}日 ${hours}:${minutes}:${seconds} ${day_str}`
    }else{
        //替换年月日时分秒
        format = format.replace('YY',year)
        format = format.replace('MM',month)
        format = format.replace('DD',date)
        format = format.replace('hh',hours)
        format = format.replace('mm',minutes)
        format = format.replace('ss',seconds)
        format = format.replace('Day',day_str)
        return format
    }
}

5.时间插件moment.js

moment.js封装了大量的时间方法，无论是兼容性还是效率都比原生js强
引入插件：浏览器引入

<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>

引入插件：使用npm

//安装
npm install moment --save

//引入moment
import moment from 'moment'

设置语言：默认情况下，插件使用的是英文，如果想要中文输出（输出星期几），需要引入语文文件（如果是npm环境，则还需要进行声明）

<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<!-- 在moment.js之后引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/locale/zh-cn.min.js"></script>

<script>
    //如果是npm环境，则还需要进行声明
    //moment.locale('zh-cn')

    //输出星期几
    var week_day = moment().format('dddd')
    console.log(week_day) //Monday or 星期一
</script>

格式化时间日期：这个插件最常用的功能就是这个，调用format()方法，通过正则替换的形式输出带有年月日信息的字符串（碰到字符串中的转义字符则替换成对应的数据，普通字符串则原模原样输出）

<script>

//年份
console.log(moment().format('YYYY')) //2021 4位数年份
console.log(moment().format('YY'))//21 2位数年份
console.log(moment().format('Y'))//2021

console.log('**************')

//月份
console.log(moment().format('MMMM')) //一月  大写
console.log(moment().format('MMM')) //1月 小写
console.log(moment().format('MM')) //01 2位数月份
console.log(moment().format('M')) //1 1位数月份

console.log('**************')

//日期
console.log(moment().format('Do')) // 4日 月的某天
console.log(moment().format('D')) // 4 月的某天 1位数
console.log(moment().format('DD')) // 04  月的某天 2位数
console.log(moment().format('DDD')) // 4 年的某天 1位数
console.log(moment().format('DDDD')) // 004 年的某天 3位数

console.log('**************')

//时钟
console.log(moment().format('hh')) //02 12小时制 2位数
console.log(moment().format('h')) //2 12小时制 1位数
console.log(moment().format('HH')) //14 24小时制 2位数
console.log(moment().format('H')) //14 24小时制 1位数

console.log('**************')

//分钟
console.log(moment().format('mm')) //07 分钟数 最少2位数
console.log(moment().format('m')) //7 分钟数 1位数

console.log('**************')

//秒钟
console.log(moment().format('ss')) //04 秒钟 最少2位数
console.log(moment().format('s')) //4 秒钟 1位数

//时间戳
console.log(moment().format('x')) //1609740460631 时间戳 单位毫秒

console.log('**************')

//星期
console.log(moment().format('dddd')) //星期一
console.log(moment().format('ddd')) //周一
console.log(moment().format('e')) //0  [0-6]输出星期的序号 周一为0 周日为6
console.log(moment().format('E')) //1  [1-7]输出星期的序号 周一为1 周日为7

console.log('**************')

//上午或下午
console.log(moment().format('a')) //下午
console.log(moment().format('A')) //下午

//一年中的第几天
Moment('2023-01-01').format('DDDD') //001
Moment('2023-01-01').format('DDD') //1

//季度
Moment('2023-02-19').format('Q') //1
</script>

输出相对时间fromNow()：输出目标时间与当前时间的相对时间，moment.js会根据时间长度自动换算时间单位

<script>
    //传入一个12年前的时间
    console.log(moment(new Date().setFullYear(2008)).fromNow()) //12 年前

    //传入一个3个月前的时间 8表示9月份
    console.log(moment(new Date().setMonth(8)).fromNow()) //3 个月前

    //传入一个10前的时间
    var before_10day = new Date()
    before_10day.setDate(before_10day.getDate() - 10)
    console.log(moment(before_10day).fromNow()) //10 天前

    //传入一个10小时前的时间
    var before_10hours = new Date()
    before_10hours.setHours(before_10hours.getHours() - 10)
    console.log(moment(before_10hours).fromNow()) //10 小时前
</script>

时长单位转换：将两个时间的间隔（单位默认毫秒），转换成其他单位进行输出（秒,分钟,小时，天），这里用分钟做演示，其他时间单位的方法自查文档

<script>
    //获取时间间隔（相差2分钟30秒)
	var duration = new Date('2021-07-23 12:32:30').getTime() - new Date('2021-07-23 12:30:00').getTime()
	//创建moment时长对象
	var $duration = moment.duration(duration) //默认毫秒

    //直接转换成分钟计算，通常转换成小数
    var minutes_num = $duration.asMinutes() //2.5
    //只取分钟部分，其他忽略
    var minutes_now = $duration.minutes() //2
</script>

其他方法（以下搬运自官方文档）：

//日期格式化
moment().format('MMMM Do YYYY, h:mm:ss a'); // 十月 7日 2020, 12:02:37 中午
moment().format('dddd');                    // 星期三
moment().format("MMM Do YY");               // 10月 7日 20
moment().format('YYYY [escaped] YYYY');     // 2020 escaped 2020
moment().format();                          // 2020-10-07T12:02:37+08:00

//相对时间
moment("20111031", "YYYYMMDD").fromNow(); // 9 年前
moment("20120620", "YYYYMMDD").fromNow(); // 8 年前
moment().startOf('day').fromNow();        // 12 小时前
moment().endOf('day').fromNow();          // 12 小时内
moment().startOf('hour').fromNow();       // 3 分钟前

//日历时间
moment().subtract(10, 'days').calendar(); // 2020/09/27
moment().subtract(6, 'days').calendar();  // 上星期四12:02
moment().subtract(3, 'days').calendar();  // 上星期日12:02
moment().subtract(1, 'days').calendar();  // 昨天12:02
moment().calendar();                      // 今天12:02
moment().add(1, 'days').calendar();       // 明天12:02
moment().add(3, 'days').calendar();       // 下星期六12:02
moment().add(10, 'days').calendar();      // 2020/10/17

//多语言支持
moment.locale();         // zh-cn
moment().format('LT');   // 12:02
moment().format('LTS');  // 12:02:37
moment().format('L');    // 2020/10/07
moment().format('l');    // 2020/10/7
moment().format('LL');   // 2020年10月7日
moment().format('ll');   // 2020年10月7日
moment().format('LLL');  // 2020年10月7日中午12点02分
moment().format('lll');  // 2020年10月7日 12:02
moment().format('LLLL'); // 2020年10月7日星期三中午12点02分
moment().format('llll'); // 2020年10月7日星期三 12:02

posted @ 2019-12-11 15:39 ---空白--- 阅读(602) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

---空白---

JavaScript Date 对象

1.获取时间

2.设置日期

3.时间初始化

4.封装格式化时间函数

5.时间插件moment.js

公告