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


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 相关文章推荐
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 Javascript
vue-cli常用设置总结
Feb 24 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 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
yii实现创建验证码实例解析
2014/07/31 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
javascript 解析url的search方法
2010/02/09 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
js实现一个简易计算器
2020/03/30 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
商务会议邀请函
2014/01/09 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
心理健康活动总结
2014/04/30 职场文书
绘画专业自荐信
2014/07/04 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
入党函调证明材料
2014/12/24 职场文书
母亲节寄语大全
2015/02/27 职场文书
600字作文之感受大自然
2019/11/27 职场文书
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android