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


Posted in Javascript onDecember 03, 2018

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

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

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
  });
 }
})

运行结果如下图所示:

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

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

Javascript 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
angular实现form验证实例代码
Jan 17 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
从零开始实现Vue简单的Toast插件
Dec 03 #Javascript
使用NestJS开发Node.js应用的方法
Dec 03 #Javascript
写gulp遇到的ES6问题详解
Dec 03 #Javascript
使用mpvue搭建一个初始小程序及项目配置方法
Dec 03 #Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 #Javascript
koa2实现登录注册功能的示例代码
Dec 03 #Javascript
react-router 路由切换动画的实现示例
Dec 03 #Javascript
You might like
我的群发邮件程序
2006/10/09 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
JQuery 操作/获取table具体代码
2013/06/13 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
Python 文件读写操作实例详解
2014/03/12 Python
小小聊天室Python代码实现
2016/08/17 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
numpy数组拼接简单示例
2017/12/15 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
python复合条件下的字典排序
2020/12/18 Python
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
学生自我鉴定
2013/12/18 职场文书
车贷收入证明范本
2014/01/09 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
大雁塔英文导游词
2015/02/10 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
Python Parser的用法
2021/05/12 Python
pandas提升计算效率的一些方法汇总
2021/05/30 Python
整理Python中常用的conda命令操作
2021/06/15 Python
python中的getter与setter你了解吗
2022/03/24 Python