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


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操作文本框readOnly
May 15 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
几个php应用技巧
2008/03/27 PHP
PHP设置进度条的方法
2015/07/08 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
jQuery 表格工具集
2010/04/25 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
JS实现分页导航效果
2020/02/19 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
Python中的choice()方法使用详解
2015/05/15 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
综合测评自我鉴定
2013/10/08 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
大学班级学风建设方案
2014/05/01 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
法院个人总结
2015/03/03 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript