微信小程序显示倒计时功能示例【测试可用】

 更新时间:2018年12月03日 10:50:09   作者:kerryqpw  
这篇文章主要介绍了微信小程序显示倒计时功能,结合实例形式分析了微信小程序针对给定时间的倒计时功能相关界面显示与逻辑运算操作技巧,需要的朋友可以参考下

本文实例讲述了微信小程序显示倒计时功能。分享给大家供大家参考,具体如下:

微信小程序中显示倒计时:

index.wxml:

<view class='countdown'>剩:<text style='color:#6B4EFD'> {{countDownDay}} </text> 天 <text style='color:#6B4EFD'>{{countDownHour}} </text> <text style='color:#6B4EFD'>{{countDownMinute}} </text> <text style='color:#6B4EFD'>{{countDownSecond}} </text>
</view>

index.js:

Page( {
 data: {
  windowHeight: 654,
  maxtime: "",
  isHiddenLoading: true,
  isHiddenToast: true,
  dataList: {},
  countDownDay: 0,
  countDownHour: 0,
  countDownMinute: 0,
  countDownSecond: 0,
 },
 //事件处理函数
 bindViewTap: function() {
  wx.navigateTo( {
   url: '../logs/logs'
  })
 },
 onLoad: function() {
  this.setData( {
   windowHeight: wx.getStorageSync( 'windowHeight' )
  });
 },
 // 页面渲染完成后 调用
 onReady: function () {
  var totalSecond = Date.parse(new Date("2018/12/12")) / 1000 - Date.parse(new Date()) / 1000;
  var interval = setInterval(function () {
   // 秒数
   var second = totalSecond;
   // 天数位
   var day = Math.floor(second / 3600 / 24);
   var dayStr = day.toString();
   if (dayStr.length == 1) dayStr = '0' + dayStr;
   // 小时位
   var hr = Math.floor((second - day * 3600 * 24) / 3600);
   var hrStr = hr.toString();
   if (hrStr.length == 1) hrStr = '0' + hrStr;
   // 分钟位
   var min = Math.floor((second - day * 3600 *24 - hr * 3600) / 60);
   var minStr = min.toString();
   if (minStr.length == 1) minStr = '0' + minStr;
   // 秒位
   var sec = second - day * 3600 * 24 - hr * 3600 - min*60;
   var secStr = sec.toString();
   if (secStr.length == 1) secStr = '0' + secStr;
   this.setData({
    countDownDay: dayStr,
    countDownHour: hrStr,
    countDownMinute: minStr,
    countDownSecond: secStr,
   });
   totalSecond--;
   if (totalSecond < 0) {
    clearInterval(interval);
    wx.showToast({
     title: '活动已结束',
    });
    this.setData({
     countDownDay: '00',
     countDownHour: '00',
     countDownMinute: '00',
     countDownSecond: '00',
    });
   }
  }.bind(this), 1000);
 },
 //cell事件处理函数
 bindCellViewTap: function (e) {
  var id = e.currentTarget.dataset.id;
  wx.navigateTo({
   url: '../babyDetail/babyDetail?id=' + id
  });
 }
})

运行结果如下图所示:

 

希望本文所述对大家微信小程序开发有所帮助。

相关文章

  • 基于小程序请求接口wx.request封装的类axios请求

    基于小程序请求接口wx.request封装的类axios请求

    这篇文章主要介绍了基于小程序请求接口wx.request封装的类axios请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • css客齐集社区头像显示效果

    css客齐集社区头像显示效果

    这个例子,首先是把SPAN里的内容用display:none;干掉,就是不显示; 然后在A:HOVER时,再把SPAN里的内容display:block; 就是显示出来;同时定义一下SPAN的位置; 其它代码很简单,但有人说看不太懂;我就简单说一下;
    2008-06-06
  • bootstrap modal+gridview实现弹出框效果

    bootstrap modal+gridview实现弹出框效果

    这篇文章主要介绍了bootstrap modal+gridview实现弹出框效果,gridview点击更新弹出填写信息表单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • JavaScript报错:Uncaught TypeError: XXX is not iterable的解决方法

    JavaScript报错:Uncaught TypeError: XXX is 

    在 JavaScript 编程中,“Uncaught TypeError: XYZ is not iterable” 是一种常见的错误,这种错误通常发生在试图对一个非可迭代对象进行迭代操作时,了解这种错误的成因和解决方法,对于编写健壮的代码至关重要,需要的朋友可以参考下
    2024-07-07
  • 用javascript删除当前行,添加行(示例代码)

    用javascript删除当前行,添加行(示例代码)

    这篇文章主要介绍了用javascript删除当前行,添加行的示例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • token 机制和实现方式

    token 机制和实现方式

    这篇文章主要介绍了token 机制和实现方式的相关资料,帮助大家更好的理解和学习token,感兴趣的朋友可以了解下
    2020-12-12
  • JS实现统计字符串中字符出现个数及最大个数功能示例

    JS实现统计字符串中字符出现个数及最大个数功能示例

    这篇文章主要介绍了JS实现统计字符串中字符出现个数及最大个数功能,结合实例形式分析了javascript字符串遍历、统计相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • 一文搞懂TypeScript的安装、使用、自动编译的教程

    一文搞懂TypeScript的安装、使用、自动编译的教程

    TypeScript 是一种由微软开发的开源、跨平台的编程语言。它是 JavaScript 的超集,最终会被编译为 JavaScript 代码,关于TypeScript的安装、使用、自动编译很多朋友不是很清楚,今天抽空给大家普及下,感兴趣的朋友一起看看吧
    2021-06-06
  • 简单实例处理url特殊符号&处理(2种方法)

    简单实例处理url特殊符号&处理(2种方法)

    url里的参数内容包含&符合,我有两种方法解决一是:在页面用JS转码;二是:在后端处理,另外还有网络分享的一些方法,感兴趣的朋友可以参考下哈
    2013-04-04
  • 浅析javascript函数表达式

    浅析javascript函数表达式

    这篇文章主要向大家详细介绍了javascript函数表达式,帮助大家理解javascript函数表达式,感兴趣的朋友可以参考一下
    2016-02-02

最新评论