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


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 相关文章推荐
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
银行会计业务的个人自我评价
2013/11/02 职场文书
寄语是什么意思
2014/04/10 职场文书
处罚决定书范文
2015/06/24 职场文书
教师读书笔记
2015/06/29 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server