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


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 相关文章推荐
jQuery输入城市查看地图使用介绍
May 08 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
动态加载jquery库的方法
Feb 12 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
js选择器全面解析
Jun 27 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 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
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
python设置环境变量的作用和实例
2019/07/09 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
Python 如何实现访问者模式
2020/07/28 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
村优秀党员事迹材料
2014/01/15 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
继承权公证书范本
2015/01/23 职场文书
社会实践活动报告
2015/02/05 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
Linux系统下安装PHP7.3版本
2021/06/26 PHP
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技