JavaScript中的内置对象有Math、Date、String、Array。
内置对象就是Javascript语言已经给我们提供好的,自带的一些对象,可以供我们直接使用的。这些对象还提供了一些常用的或基本使用的功能,也就是对象的属性和方法。
就像我们去买一个手机,里面的视像头、相机、电池等都是安装好的,我们可以直接使用的,不需要我们自己去下载安装。
主要学习这些对象常用的方法。
注意: 创建一个 JavaScript Date 实例,该实例呈现时间中的某个时刻。Date对象则基于 Unix Time Stamp,即自1970年1月1日(UTC)起经过的毫秒数。
对象的实例化:代表使用对象时必须要new 关键字。
日期对象,我们常用的功能就是实现倒计时的效果。在文章最后,会封装一个倒计时的函数。
Date实例化
无参数:返回的是当前时间
var nowTime = new Date();
有参数:返回的是接收的参数的时间
传参数有两种形式:字符串、数值
var timer = new Date('2020-2-30 12:00:00');
var timer2 = new Date(2020, 10, 25);
返回的月份比实际月份多1.
月份是(0~11)
var nowTime = new Date();
console.log(nowTime);
// 有参数:返回的是参数的时间
var timer = new Date('2020-2-30 12:00:00');
console.log(timer);
var timer2 = new Date(2020, 10, 25);
console.log(timer2); // 返回的是11月 不是10月
Date日期格式化
按照我们中国人的习惯,我们更喜欢的日期是 2020年2月29日,而不是上面默认的输出方式。
所有我们需要用到对象的方法,去获取年月日,再使用字符串拼接的方式输出。
常用方法:
代码实现:
// 格式化日期: 输出 2020 年 2 月 28 号 星期五
var time = new Date(); // Date 是构造函数 使用之前必须要有这句话
var year = time.getFullYear();
console.log(year); // 输出当前 年
// 因为月是0~11 所有月份要+1 哟
var month = time.getMonth() + 1;
month = month < 10 ? '0' + month : month;
console.log(month); // 输出1 不是2 因为月是0~11 所有月份要+1 哟
var day = time.getDate();
console.log(day); // 输出的是28
console.log('今天是:' + year + '年' + month + '月' + day + '日');
var week = time.getDay();
console.log(week); // 输出的是5 为不是五
// var weeks = new Date('2020-2-30');
// console.log(weeks.getDay()); // 输出的是0 因为星期日是0 一周七天 0~6
效果图:
一周七天,星期日返回的是0,为了方便输出,我们可以把星期一到星期日存放到一个数组中,切记第一个放星期日(索引号为0)
这样的话我们就可以,完整的输出当前日期了
<script>
// 格式化日期: 输出 2020 年 2 月 28 号 星期五
var time = new Date(); // Date 是构造函数 使用之前必须要有这句话
var year = time.getFullYear();
console.log(year); // 输出当前 年
// 因为月是0~11 所有月份要+1 哟
var month = time.getMonth() + 1;
month = month < 10 ? '0' + month : month;
console.log(month); // 输出1 不是2 因为月是0~11 所有月份要+1 哟
var day = time.getDate();
console.log(day); // 输出的是28
console.log('今天是:' + year + '年' + month + '月' + day + '日');
var week = time.getDay();
console.log(week); // 输出的是5 为不是五
// var weeks = new Date('2020-2-30');
// console.log(weeks.getDay()); // 输出的是0 因为星期日是0 一周七天 0~6
// 为了让星期更好的输出,我们把一周七天存储在一个数组中
var weekTimes = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
// 通过week返回的数值,去数组中找对应的索引从而返回数组的内容
console.log(weekTimes[week]);
console.log('今天是:' + year + '年' + month + '月' + day + '日' + weekTimes[week]);
</script>
这是当前时间的输出,若是想返回不同时间,只需在实例化对象时传参数即可。
倒计时函数
在这里我们要说一个时间戳
一个 Unix 时间戳(Unix Time Stamp),它是一个整数值,表示自1970年1月1日00:00:00 UTC(the Unix epoch)以来的毫秒数,忽略了闰秒
时间戳通俗来讲就是,从1970年1月1日到此时此刻,过去了多少毫秒。过去的时间是无法返回的,具有不可替代性和不可重复性,这个数值是唯一的。所有,我们要做的倒计时效果,就是利用了时间戳的原理。
还有一点需要注意,当数值小于10时,我们需要在数值前面补0,这样符合我们中国人的习惯,而且排版也更好看。
制作思路:
1. 倒计时核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时。但是不能拿时分秒去减秒,就像5分18秒和4分50秒,结果会得负数的。
2. 所有用时间戳来做,输入时间的总毫秒数减去现在时间总毫秒数就是剩余时间毫秒数。
3. 最后用毫秒数转化为天、时、分、秒
下面封装一个倒计时的函数:
<script>
// 时间戳转换年月日,时分秒
// 总秒数 = 总毫秒 / 1000
// 当前秒数 = 总秒数 % 60
// 分 = 总秒数 / 60 % 60
// 时 = 总秒数 / 60 / 60 % 24
// 天 = 总秒数 / 60 / 60 / 24
// 用输入的总毫秒数-现在的毫秒数 就是倒计时的效果
// 做出 01天 02时 01分 58秒类似的效果
function countDown(time) {
var nowTime = +new Date(); //返回的是现在的时间的总的毫秒数
var inputTimers = +new Date(time); //返回的是用户输入时间的总的毫秒数
var titMs = (inputTimers - nowTime) / 1000; // 总秒数
var sec = parseInt(titMs % 60); //当前秒
sec = sec < 10 ? '0' + sec : sec;
var min = parseInt(titMs / 60 % 60); //当前分
min = min < 10 ? '0' + min : min;
var hours = parseInt(titMs / 60 / 60 % 60); //当前时
hours = hours < 10 ? '0' + hours : hours;
var day = parseInt(titMs / 60 / 60 / 24); //当前天
day = day < 10 ? '0' + day : day;
return day + '天' + hours + '时' + min + '分' + sec + '秒';
}
console.log(countDown('2020-2-29 10:00:00'));
var date = new Date();
console.log(date);
</script>
测试结果:
Date常用的功能之一——倒计时效果,今天完成啦!!!!
下一步就要学习数组喽!!!!
加油加油加油鸭!!!!!