[先行者课程] -- 用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 条评论
登录 后参与评论

相关文章

来自专栏猿人谷

C++命名规则

如果想要有效的管理一个稍微复杂一点的体系,针对其中事物的一套统一、带层次结构、清晰明了的命名准则就是必不可少而且非常好用的工具。 活跃在生物学、化学、军队、监狱...

23760
来自专栏Java大联盟

23种设计模式详解(三)

10510
来自专栏Android 开发者

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

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

9700
来自专栏陈纪庚

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

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

8620
来自专栏阿杜的世界

《重构》阅读笔记-代码的坏味道

开发者必须通过实践培养自己的经验和直觉,培养出自己的判断力:学会判断一个类内有多少个实例变量算是太大、学会判断一个函数内有多少行代码才算太长。

7820
来自专栏大数据文摘

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

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

12600
来自专栏编程微刊

JavaScript基础

18620
来自专栏PPV课数据科学社区

【学习】《R实战》读书笔记(第四章)

读书会是一种在于拓展视野、宏观思维、知识交流、提升生活的活动。PPV课R语言读书会以“学习、分享、进步”为宗旨,通过成员协作完成R语言专业书籍的精读和分享,达到...

29950
来自专栏深度学习计算机视觉

原型模式

原型模式的简单程度仅次于单例模式,核心方法就一个clone(),在java中只需要实现接口Cloneable即可 原型模式通过把对象复制(clone)一遍,产生...

33350
来自专栏写代码的海盗

SEO是件贼有意思的事情 golang入坑系列

这两天迷上了SEO。真心看不起百度的竞价排名,但作为一个商业网站,赚钱是一件无可厚非的事情。只做活雷锋,没有大金主是做不长的。做完功课后,发现百度和google...

32750

扫码关注云+社区

领取腾讯云代金券