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


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实现网站访问次数统计代码
Aug 12 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
JS实现购物车特效
Feb 02 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
React中的refs的使用教程
Feb 13 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
小程序关于请求同步的总结
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
针对初学PHP者的疑难问答(2)
2006/10/09 PHP
PHP 数组实例说明
2008/08/18 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
为jQuery增加join方法的实现代码
2010/11/28 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
python3.3实现乘法表示例
2014/02/07 Python
python基础教程之获取本机ip数据包示例
2014/02/10 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
python删除某个字符
2018/03/19 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
用python制作个音乐下载器
2021/01/30 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
医学生毕业自我鉴定
2014/03/26 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
2014年防汛工作总结
2014/12/08 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis