详解小程序毫秒级倒计时(适用于拼团秒杀功能)


Posted in Javascript onMay 05, 2019

废话不多说直接上代码:

效果图:

详解小程序毫秒级倒计时(适用于拼团秒杀功能)

index.js

Page({
 
 /**
  * 页面的初始数据
  */
 data: {
  countdown:''
,  endDate2: '2018-08-08 11:41:00'
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  var that = this;
  that.countTime()
 },
 countTime() {
  var that = this;
  var date = new Date();
  var now = date.getTime();
  var endDate = new Date(that.data.endDate2);//设置截止时间
  var end = endDate.getTime();
  var leftTime = end - now; //时间差               
  var d, h, m, s, ms;
  if (leftTime >= 0) {
   d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
   h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
   m = Math.floor(leftTime / 1000 / 60 % 60);
   s = Math.floor(leftTime / 1000 % 60);
   ms = Math.floor(leftTime % 1000);
   ms = ms < 100 ? "0" + ms : ms
   s = s < 10 ? "0" + s : s
   m = m < 10 ? "0" + m : m
   h = h < 10 ? "0" + h : h
   that.setData({
    countdown: d + ":" + h + ":" + m + ":" + s + ":" + ms,
   })
   //递归每秒调用countTime方法,显示动态时间效果
  setTimeout(that.countTime, 100);
  } else {
   console.log('已截止')
   that.setData({
    countdown:'00:00:00'
   })
  }
  
 },
})

index.html

<view>
  <text>{{countdown}}</text>
</view>

以上所述是小编给大家介绍的小程序毫秒级倒计时详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
小程序关于请求同步的总结
May 05 #Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 #Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 #Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 #Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 #Javascript
详解vue的双向绑定原理及实现
May 05 #Javascript
Vue+Express实现登录注销功能的实例代码
May 05 #Javascript
You might like
色色整理的PHP面试题集锦
2012/03/08 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
Angular的$http与$location
2016/12/26 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
python 控制语句
2011/11/03 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
python解决字符串倒序输出的问题
2018/06/25 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
python编程的核心知识点总结
2021/02/08 Python
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
几道Web/Ajax的面试题
2016/11/05 面试题
学术会议邀请函范文
2014/01/22 职场文书
小学二年级学生评语
2014/04/21 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
回门宴新娘答谢词
2015/09/29 职场文书