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


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 相关文章推荐
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
从零开始实现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
php 动态添加记录
2009/03/10 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
vue项目首屏加载时间优化实战
2019/04/23 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
浅谈python函数之作用域(python3.5)
2017/10/27 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
python创建子类的方法分析
2019/11/28 Python
Python中bisect的用法及示例详解
2020/07/20 Python
python3代码中实现加法重载的实例
2020/12/03 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
几个常见的软件测试问题
2016/09/07 面试题
大学生演讲稿范文
2014/01/11 职场文书
四查四看剖析材料
2014/02/14 职场文书
小区消防演习方案
2014/02/21 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
怎么写工作检讨书
2014/11/16 职场文书
千手观音观后感
2015/06/03 职场文书
班主任工作总结范文
2015/08/13 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL