🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容：

5.4_日期对象

JavaScript 中的日期对象用来处理日期和时间。例如，秒杀活动中日期的实时显示、时钟效果、在线日历等。

5.4.1_日期对象的使用

JavaScript 中的日期对象需要使用 new Date() 实例化对象才能使用，Date() 是日期对象的构造函数。在创建日期对象时，可以为 Date() 构造函数传人一些参数，来表示具体的日期，其创建方式如下。

// 方式1: 没有参数，使用当前系统的当前时间作为对象保存的时间
var datel = new Date();
// 输出结果: Wed 0ct 16 2019 10:57:56 GMT+0800 (中国标准时间)
console.log (datel);

// 方式2: 传人年，月，日、时、分、秒(月的范围是0 ~ 11,即真实月份-1)
var date2 = new Date(2019, 10, 16, 10, 57, 56);
// 输出结果: Sat Nov 16 2019 10:57:56 GMT+0800 (中国标准时间)
console.log(date2);

// 方式3: 用字符串表示日期和时间
var date3 = new Date('2019-10-16-10:57:56');
// 输出结果: Wed Oct 16 2019 10:57:56 GMT+0800(中国标准时间)
console.log(date3);

在使用方式1时，其返回的 date1 对象保存的是对象创建时的时间；
在使用方式2时，最少需要指定年、月两个参数，后面的参数在省略时会自动使用默认值；
在使用方式3时，最少需要指定年份。另外，当传入的数值大于合理范围时，会自动转换成相邻数值(如方式2将月份设为-1表示去年12月，设为12表示明年1月)。

在获取到日期对象后，直接输出对象得到的是一个字符串表示的日期和时间。如果想要用其他格式来表示这个日期和时间，可以通过调用日期对象的相关方法来实现。日期对象的常用方法分为 get 和 set 两大类。

Date 对象的常用 get 方法：

方法	作用
getFullYear()	获取表示年份的4位数字，如2020
getMonth()	获取月份，范围为0 ~ 11(0表示一月，1表示二月，依次类推)
getDate()	获取月份中的某一天，范围1 ~ 31
getDay()	获取星期，范围为0 ~ 6(0表示星期日，1表示星期一，依次类推)
getHours()	获取小时数，范围为0 ~ 23
getMinutes()	获取分钟数，范围为0 ~ 59
getSeconds()	获取秒数，范围为0 ~ 59
getMilliseconds()	获取毫秒数，范围为0 ~ 999
getTime()	获取从1970-01-01 00:00:00距离 Date 对象所代表时间的毫秒数

Date 对象的常用 set 方法：

方法	作用
setFullYear(value)	设置年份
setMonth(value)	设置月份
setDate(value)	设置月份中的某一天
setHours(value)	设置小时数
setMinutes(value)	设置分钟数
setSeconds(value)	设置秒数
setMillseconds(value)	设置亳秒数
setTime(value)	通过从1970-01-01 00:00:00 计时的毫秒数来设置时间

案例：在控制台中输出当前日期。

var date = new Date();//基于当前日期时间创建Date对象
var year = date.getFullYear();//获取年
var month = date.getMonth();// 获取月
var day = date.getDate();//获取日
//通过数组将星期值转换为字符串
var week =['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
//输出date对象保存的时间， 示例:今天是2019年9月16日星期三，
console.log('今天是'+ year + '年' + month + '月' + day + '日' + week[date.getDay()]);

在上述代码中，week[ date.getDay() ] 用来从 date 对象中获取星期值，然后作为数值的索引到 week 数组中取出对应的星期字符串。

案例：将日期对象中的时间转换成指定的格式，

//返回当前时间，格式为:时:分:秒,用两位数字表示
function getTime(){

var time = new Date();
var h = time.getHours();
h = h < 10 ? '0'+ h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s<10?'0'+s:s;

return h + ':' + m + ':'+s;
}
console.log( getTime() ); // 输出结果示例: 10:07:56

在上述代码中，第 5、7、 9 行代码用来判断给定数字是否为一位数，如果是一位数则在前面加上 “0”。

5.4.2_[案例] 统计代码执行时间

通过日期对象可以获取从1970年1月1日0时0分0秒开始一直到当前 UTC 时间所经过的毫秒数，这个值可以作为时间戳来使用。通过时间戳，可以计算两个时间之间的时间差，还可以用于加密、数字签名等技术中。

获取时间戳常见的方式如下：

//方式1:通过日期对象的valueof()或getTime()方法
var datel = new Date();
console.log( datel.valueOf() );
// 示例结果: 1571196996188
console.log( datel.getTime() );
// 示例结果: 1571196996188

//方式2:使用"+"运算符转换为数值型
var date2 = +new Date();
console.log(date2);
// 示例结果: 1571196996190

// 方式3:使用HIMLS新增的 Date.now()方法
console.log( Date.now() );
// 示例结果: 1571196996190

在这里插入图片描述

在掌握如何获取到时间戳后，下面我们来完成案例的代码编写，具体代码如下。

var timestamp1 = +new Date();

for(var i = 1, str = ''; i <= 90000; i++){
str += i;
}

var timestamp2 = +new Date();
// 示例结果:代码执行时间: 37毫秒
console.log('代码执行时间:' + (timestamp2 - timestamp1) + '毫秒');

从上述代码和输出结果示例可以看出，JavaScript 对字符串变量 str 进行了90000次拼接操作，共花费了37毫秒的执行时间。该时间会根据不同计算机的运算速度而不同。

5.4.3_[案例] 倒计时

在一些电商网站的活动页上会经常出现折扣商品的倒计时标记，显示离活动结束还剩X天X小时X分X秒，像这样的倒计时教果就可以利用日期对象来实现。

倒计时的核心算法是输人的时间减去现在的时间，得出的剩余时间就是要显示的倒计时间。这需要把时间都转化成时间戳(毫秒数)来进行计算，把得到的毫秒数转换为天数、小时、分数、秒数。

具体示例代码如下：

function countDown(time){
var nowTime = +new Date();
//+new Date() 是new Date().getTime() 代码的简写，返回当前时间戳，单位是毫秒。
var inputTime = +new Date(time);
//设置活动的结束时间戳。
var times  = (inputTime - nowTime) / 1000;
//计算剩余毫秒数，需要转换为秒数，转换规则为1秒/1000毫秒。
var d = parseInt(times / 60 / 60 / 24);
d = d < 10 ? '0' + d : d;
var h = parseInt (times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
// 第5 ~ 13 行代码计算天数d、小时h、分时m、秒数s, 并使用returm返回。
}
// 示例结果: 05天23时06分10秒
console.log(countDown('2019-10-22 10:56:57'));
// 输出距离指定结束日期2019-10-22 10:56.57还剩多少时间。

今日入门学习暂时告一段落
Peace

🌊🌈往期回顾：

【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十八）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十九）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（二十）

🌊🌈关于后记：

感谢阅读，希望能对你有所帮助博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我感谢每一位小伙伴不吝赐教

原创不易，「点赞」+「关注」 谢谢支持❤

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（九）