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


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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
翻译整理的jQuery使用查询手册
Mar 07 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
javascript object array方法使用详解
Dec 03 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
小程序关于请求同步的总结
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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
PHP的几个常用数字判断函数代码
2012/04/24 PHP
CI框架中zip类应用示例
2014/06/17 PHP
smarty中js的调用方法示例
2014/10/27 PHP
php中adodbzip类实例
2014/12/08 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
python模拟enum枚举类型的方法小结
2015/04/30 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
小学红领巾中秋节广播稿
2014/01/13 职场文书
消防安全检查制度
2014/02/04 职场文书
生物学专业求职信
2014/07/23 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
2014年团支部工作总结
2014/11/17 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2014年司法局工作总结
2014/12/11 职场文书
MySQL基础(二)
2021/04/05 MySQL
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL