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


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 相关文章推荐
jquery validate poshytip 自定义样式
Nov 26 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
小程序关于请求同步的总结
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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
浅析node.js中close事件
2014/11/26 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
python logging日志模块的详解
2017/10/29 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
python中实现控制小数点位数的方法
2019/01/24 Python
Python获取时间戳代码实例
2019/09/24 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
Foreo国际站:Foreo International
2018/10/29 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
explicit和implicit的含义
2012/11/15 面试题
产品销售员岗位职责
2013/12/18 职场文书
临床护理求职信
2014/04/26 职场文书
监察建议书格式
2014/05/19 职场文书
企业安全生产承诺书
2014/05/22 职场文书
小学数学教学反思范文
2016/02/16 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python