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


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 相关文章推荐
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
bootstrap下拉框动态赋值方法
Aug 10 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
JavaScript实现简单动态表格
Dec 02 Javascript
微信小程序实现聊天室功能
Jun 14 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
PHP base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
php addslashes 函数详细分析说明
2009/06/23 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
Django框架模板介绍
2019/01/15 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
应届生服务员求职信
2013/10/31 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
内衣营销方案
2014/03/15 职场文书
高中班主任评语
2014/12/30 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js