[先行者课程] -- 用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(...),来不断的重复执行。

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

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2017-03-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java大联盟

23种设计模式详解(三)

951
来自专栏程序员的诗和远方

20181013_ARTS_week16

这题没好好审题,题目中说不能增加其它空间,以及要在原数组中改,没注意最后只要前 n 位是无重复的就可以了。

913
来自专栏陈纪庚

使用装饰者模式做有趣的事情

装饰者模式是一种为函数或类增添特性的技术,它可以让我们在不修改原来对象的基础上,为其增添新的能力和行为。它本质上也是一个函数(在javascipt中,类也只是函...

742
来自专栏程序员互动联盟

【答疑解惑】为什么这么多人不喜欢用goto?

有网友在群里面问了一个问题:goto语句如何使用?这个问题引发了一系列争论。如下: ? ? ? ? ? 上面的讨论总结下来就是两点,有人建议尽量不要使用got...

3075
来自专栏AI研习社

博客 | LeetCode 617. Merge Two Binary Trees

在日常的业务系统开发中,通常架构设计>数据结构设计>算法设计,架构设计,重在理解业务场景,考虑用户规模和系统适配性的基础上,想清楚每个模块的职责,剩下的就是利用...

761
来自专栏大数据文摘

业界 | 用Python做数据科学时容易忘记的八个要点!

虽然我们在StackOverflow或其他网站上查找答案是很正常的事情,但这样做确实比较花时间,也让人怀疑你是否完全理解了这门编程语言。

1200
来自专栏怀英的自我修炼

Java漫谈2

本周我们的Java漫谈从一个段子说起。话说有一个老程序退休了,在家闲着没事便开始学习写毛笔字,焚香,研墨,铺纸。站在薄如蝉翼白似雪的宣纸面前,提笔闭目。只见那人...

3298
来自专栏大闲人柴毛毛

三分钟理解“简单工厂模式”——设计模式轻松掌握

实际问题: 由于超市隔三差五就要办促销活动,但每次促销活动的方式不一样,所以需要开发一个软件,营业员只要输入原价再选择活动类型后,就能计算出折扣以后的价钱。 普...

37312
来自专栏Android 开发者

[译] Kotlin 揭秘:理解并速记 Lambda 语法

在奥地利旅行期间,我参观了维也纳的奥地利国家图书馆。特别是国会大厅,这个令人惊叹的空间感觉就像印第安纳琼斯电影中的一些东西。房间周围的空间是这些门被装在架子上,...

870
来自专栏java思维导图

自下向上的编写容易阅读的代码(上)

我在 关于极简编程的思考 中曾提到要编写可阅读的代码。因为代码是编写一次,阅读多次。 阅读者包括代码编写者,以及后来的维护人员。能让阅读代码更轻松,有利于增强项...

3478

扫码关注云+社区