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

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

效果图:

以上所述是小编给大家介绍的微信小程序中显示倒计时详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 微信小程序之发送短信倒计时功能

    点击后 代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="fidpas"> <input type="number" class="fidpas_inp"placeholder-class="lgin_place" placeholder="请输入手机号&quo

  • 微信小程序电商常用倒计时实现实例

    微信小程序电商常用倒计时实现实例 wxml文件放个text <text>second: {{second}} micro second:{{micro_second}}</text> 在js文件中调用 function countdown(that) { var second = that.data.second if (second == 0) { // console.log("Time Out..."); that.setData({ second: &q

  • 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.效果图: 2.页面仅仅利用了JS的相关功能,包含:wxml.js.wxss 2.1wxml页面代码: <text>绑定手机</text> <form bindsubmit="bindMobile"> <view class="form_group"> <text>手 机:</text> <input type="

  • 微信小程序实现倒计时60s获取验证码

    本文实例为大家分享了微信小程序倒计时获取验证码的具体代码,供大家参考,具体内容如下 1.工具类(引用微信小程序提供的工具类) countdown.js class Countdown { constructor(options = {}) { Object.assign(this, { options, }) this.__init() } /** * 初始化 */ __init() { this.page = getCurrentPages()[getCurrentPages().length

  • 微信小程序倒计时功能实例代码

    本实例的主要功能是:单击按钮弹出一个半透明的弹出层,在规定的时间后才能激活关闭按钮,关闭弹出层. wxml部分 <view class="wrap"> <view class="btns"> <button formType="submit" class="btn" hover-class='btn_on' bindtap='show'>使用说明</button> <but

  • 微信小程序 倒计时组件实现代码

    功能: 适用于电商应用的限时团购.商品秒杀等 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段代码. wxml文件放个text <text>second: {{second}} micro second:{{micro_second}}</text> 在js文件中调用 function countdown(that) { var second = that.data.second

  • 微信小程序实现验证码获取倒计时效果

    本文实例为大家分享了微信小程序实现获取验证码倒计时效果的具体代码,供大家参考,具体内容如下 wxml <button disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode"> {{time}} </button> js var interval = null //倒计时函数 Page({ data: { date:'请选择日期', fun_id:2, time: '获

  • 微信小程序倒计时功能实现代码

    倒计时功能是一个比较常见的功能,比如用户获取验证码就需要用到.这里记录一下在微信小程序里面倒计时功能的简单实现. 直接看看代码吧 //倒计时60秒 function countDown(that,count) { if (count == 0) { that.setData({ timeCountDownTop: '获取验证码', counting:false }) return; } that.setData({ counting:true, timeCountDownTop: count +

  • 微信小程序动态显示项目倒计时效果

    本文实例为大家分享了微信小程序动态显示项目倒计时的具体代码,供大家参考,具体内容如下 1.一般我们说的显示秒杀都是指的单条数据,循环我没做. 效果: 2.wxml代码: <p> <block wx:if="{{total_micro_second<=0}}">剩余时间:已经截止</block> <block wx:if="{{clock!='已经截止'}}">剩余时间:{{clock}}</block>

  • 微信小程序实现倒计时调用相机自动拍照功能

    本文实例为大家分享了微信小程序定时拍照的具体代码,供大家参考,具体内容如下 在某些进行签到的场景,为了防止用户选择相册的照片或者不实时拍照,设置相机倒计时自动拍照. 一.首先是视图层index.wxml,视图层主要负责显示组件和图片. <!--index.wxml--> <view class="userinfo-login"> <view class="page-body"> <view class="page-

随机推荐