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


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 相关文章推荐
JavaScript 替换Html标签实现代码
Oct 14 Javascript
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
Javascript自定义事件详解
Jan 13 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
捕获未处理的Promise错误方法
Oct 13 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
微信小程序日历弹窗选择器代码实例
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
咖啡常见的种类
2021/03/03 新手入门
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
在线服装零售商:SheIn
2016/07/22 全球购物
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
个人简历自我评价
2014/02/02 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
三峡大坝导游词
2015/01/31 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
Python字典和列表性能之间的比较
2021/06/07 Python
python面向对象版学生信息管理系统
2021/06/24 Python