JavaScript基础之内置对象——日期对象Date

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常用的功能之一——倒计时效果,今天完成啦!!!!

下一步就要学习数组喽!!!!

加油加油加油鸭!!!!!

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章