专栏首页web前端教室[先行者课程] -- 用js实现倒计时功能的业务逻辑

[先行者课程] -- 用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),作者:老尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何规划一个前端组件:单&复选按钮

    image.png 一个自定义的单选和复选按钮,这其实就是一个前端组件。为什么它不被称为模块呢?因为它不处理数据,没有业务逻辑,它只是一个事实上的样式,在操作交...

    web前端教室
  • 最开始时,我是怎么搞懂开发思路的?

    在我刚开始做前端,写js的时候,这个问题曾经长久的困扰着我。面对一个UI设计图,我的脑子里是一团乱,完全无从下手,当初就是拿到UI图的时候,我看着图竟然走神了。...

    web前端教室
  • HTML5 Geolocation

    Geolocation 在HTML5中,geolocation作为navigator的一个属性出现。 window.navigator.geolocation对...

    web前端教室
  • Vue版本更新清除浏览器缓存

    wePanda
  • 用JUnit和Byteman测试Spring中的异步操作

    在本文中,我们可以找到如何在使用spring上下文的应用程序中测试此类操作(启用异步操作)。我们无需更改生产代码即可实现这一目标。

    用户6543014
  • python 使用jinja2对html模板文件进行数据替换

    背景:执行完自动化测试后,希望将获取到的测试结果数据替换html模板文件,以生成测试报告。

    小白will
  • 币小秘,助小白活成大神模样

    2017年,数字货币市场被烙上了“区块链”的印记,区块链技术催生出越来越多的新生投资者卷入数字货币的大潮里。类似于币小秘的数资管家的出现,显得尤为重要。

    区块链解说家
  • 密码学系列之:明文攻击和Bletchley Park

    明文攻击就是指已经知道了部分明文和它对应的加密后的字段,从而可以推测出使用的加密手段或者密码本。明文攻击这个故事还要从二战时候说起。

    程序那些事
  • Linux系列教程(八)——Linux常用命令之压缩和解压缩命令

      前面一篇博客我们讲解了Linux帮助和用户管理命令,对于帮助命令,man 命令能获得命令和配置文件的帮助信息,help命令能获得shell内置命令的帮助信息...

    IT可乐
  • 从相册中取图片

    需要加载一个协议 UIImagePickerControllerDelegate //从手机相册中获得图片并显示在imageView中 - (IBAction)...

    用户1219438

扫码关注云+社区

领取腾讯云代金券