微信小程序中显示倒计时代码实例


Posted in Javascript onMay 09, 2019

wxml文件中:

<!--倒计时 -->
  <view class="countDownTimeView countDownAllView" >
   <view class="voteText countDownTimeText">{{countDownDay}}天</view>
   <view class="voteText countDownTimeText">{{countDownHour}}时</view>
   <view class="voteText countDownTimeText">{{countDownMinute}}分</view>
   <view class="voteText countDownTimeText">{{countDownSecond}}秒</view>
  </view>

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 = 1505540080 - 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 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
在textarea中显示html页面的javascript代码
Apr 20 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 Javascript
微信小程序日历弹窗选择器代码实例
May 09 #Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 #Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 #Javascript
uni-app之APP和小程序微信授权方法
May 09 #Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 #Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 #Javascript
JS原型与继承操作示例
May 09 #Javascript
You might like
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
分页栏的web标准实现
2011/11/01 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
linux下python抓屏实现方法
2015/05/22 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
Python列表(List)知识点总结
2019/02/18 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
自学python用什么系统好
2020/06/23 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
微观物理专业自荐信
2014/01/26 职场文书
网站美工岗位职责
2014/04/02 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书