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


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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
通过隐藏option实现select的联动效果
Nov 10 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 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
1 Tube Radio
2021/03/02 无线电
php empty函数判断mysql表单是否为空
2010/04/12 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
XENON基于JSON变种
2010/07/27 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
Django model反向关联名称的方法
2018/12/15 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
离婚协议书范本(2014版)
2014/09/28 职场文书
护理培训心得体会
2016/01/22 职场文书
入党心得体会
2019/06/20 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
python函数的两种嵌套方法使用
2022/04/02 Python