js实现倒数 —— ‘剩下多少天多少秒’

一、开始

这个星期二去面试时遇到一道这样的题目”请用 js 实现距离 XX 还剩……天……小时……秒”，当时只是觉得创建一个数据保存下每个月有多少天，再去获取天数相减就可以了。

当时只是为了解决这个问题，并没有细想，现在觉得这种方法过于繁琐，而且还有闰年的问题。

现在我重新写一下这个方法，用时间戳来解决这个问题。

二、时间戳

什么是时间戳呢？时间戳其实就是现在的时间距离格林威治时间 1970 年 01 月 01 日 00 时 00 分 00 秒(北京时间 1970 年 01 月 01 日 08 时 00 分 00 秒)起至现在的总秒毫数。

注意北京时间有八个小时的误差，所以我们直接 new Date(2018-01-01)其实是 2018 年 1 月 1 日的八点，所以我们要指定时间。

实现

比如我们写一个方法计算我们距 2018 年还有多少天：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function dateCount(){
        // 获取现在的时间
        var date = new Date();
        // 2018的第一天
        var until = new Date('2018-01-01 00:00:00');
        // 计算时会发生隐式转换，调用valueOf()方法，转化成时间戳的形式
        var days = (until - date)/1000/3600/24;
        // 下面都是简单的数学计算
        var day = Math.floor(days);
        var hours = (days - day)*24;
        var hour = Math.floor(hours);
        var minutes = (hours - hour)*60;
        var minute = Math.floor(minutes);
        var seconds = (minutes - minute)*60;
        var second = Math.floor(seconds);
        var back = '距离2018年还剩下'+day+'天'+hour+'小时'+minute+'分钟'+second+'秒';
        return back;
    }

然后再用 setInterval()方法实现实时倒数

1
2
3
4
5
setInterval(function(){
        var text = dateCount();
        // show是一个节点
        show.innerText = text;
},1000)

这样就实现了倒数：count.gif