[先行者课程] -- 用js实现倒计时功能的业务逻辑

今天是2017年3月19号，周日，我们一起来学习“倒计时”这个前端“需求”。

一，看一下上周的作业，视差滚动的作业；

二，开始分享学习倒计时应用。

因为时间的关系它分成二次来讲，

今天，讲上半部分，就是它的js的业务逻辑的实现；

然后下周，讲它的reactJs的实现，还有在nodeJs里把它运行起来。其实就是，下周讲一些react + node

//==================

时间倒数，倒计时，意思就是到未来还有多久。

就例如你问我，到月底还有几天？

我回答你，3月底是31号，现在是19号，到本月底还有12天。

如果你每隔一天问我一次，我会不断的回答你，

到本月底还有11天。

到本月底还有10天。

到本月底还有9天。

到本月底还有8天。

...

那么现在看来，时间倒数就是，

“以一定的时间间隔，来不断的输出，从当前时间到未来确定的某个时间点，

此二者的时间差”，

当然，这是我自己的理解，

也是我自己分析“实现时间倒数”这个需求，如何去实现的思路。

现在的前端页面，已经成为页面组件的搭建了。

单纯的纯手写页面结构与组件，有，但不多。

前端页面，已经成为“一棵前端组件的组件树”！

//==================

首先，生成当前日期的对象，new Date();

然后getFullYear获得表示当前的年份的4位数字，

然后再用new Date( year ,2,20),即date2

来获得指定日期的日期对象，也就是未来的某个时间点

然后想办法获得未来时间点，和当前日期的差。

(date2 - date)

很简单，用未来时间减去当前时间，就是此二者之间的差。

我们输出一下这个date对象，发现它是一个字符串，

“Mon Mar 20 2017 00:00:00 GMT+0800 (中国标准时间)”，

可能有同学不明白了，

这么二个字符串相减，结果怎么就是个毫秒呢？刚开始时我也不明白，

后来我想想，明白了，

首先，它们不是字符串，而是日期对象。里面包含着日期信息，和许多方法。

我们把这个日期对象用console.dir来打印看看，

它可以以“对象-属性”的方式来输出信息到控制台。

console.dir(date2);

在js里两个东西相减会隐式转换成数字，

那日期date对象转数字就是毫秒数，

说到这里，大家来看个小例子，刚才说了，

js里二个东西相减会隐式转成数字，日期对象也一样，

那我现在随便写二个对象，让它们相减看看，

function a(){
 console.log('a')
}
function b(){
 console.log('b')
}
var aa = new a;
var bb = new b;
console.dir(aa-bb);
// NaN

NaN并不意味着是一个数字，它的类型是数字。结果是一个NaN，

这说明对象相减都有隐式的转换

再往下就是把这个时间差的结果，由毫秒，转换为秒

var time = (date2 - date) / 1000;

然后是一个秒，分，时，天的换算，

无非是乘60再乘60，再乘24，，什么的一堆东西

最后输出一个倒计时结果，

然后为了不断重复输出，就用了 setInterval(...)，来不断的重复执行。

这样一个倒计时，就实现了。