如何实现倒计时效果

如何实现倒计时效果

开发工具与关键技术：VS2015、layui、JS
作者：易金亮
撰写时间：2019.05.15

我们平时在浏览网页时经常可以看到倒计时，比如在逛淘宝等购物软件时，遇到优惠活动时就经常可以看到有“距离恢复原价还有多少天”这样的倒计时，还有在购买车票时也可以看到“距离购票时间还有多少天”、“离发车时间还有多少天”这样的倒计时。既然倒计时这么常见，那倒计时效果是如何实现的呢？下面我就来说说如何实现倒计时效果，首先我们给出一个div，并且给它一个ID，然后把layui组件引入进来，其代码如下截图所示：

如上截图所示，我们给出了一个div，并且给了它一个ID，同时也把layui组件引入了进来，下面我们就该来实现那个倒计时效果了，其代码如下截图所示：

如上截图所示，我们先加载一下模块并且实例化对象，然后给它设置结束时间和当前时间，其中endTime代表的是结束时间戳或Date对象，上面我们给的是一个Date对象，而serverTime代表的是当前服务器时间戳或Date对象，设置好这些然后如上图定义一个方法并且传递一些参数，然后进行字符串的拼接，如上图代码所示，就这样我们就可以实现一个倒计时效果了，为了使效果好看一些，我们再给它设置一些简单的样式，其代码如下图所示：

通过以上代码，我们就可以实现如下图所示的倒计时效果了：

如上图效果所示，这个时间是在不断减小的，我们通过检查可以看到如下图所示的一个效果：

如上截图所示，这个div的值是在不断变化的，就这样，一个简单的倒计时效果就实现了。