用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序之倒计时

Rolan 2017-12-19 15:02

@蝮蛇之殇之前帮一个群员解决倒计时的问题,分享过来给大家看看 老规矩先说思路 1、让数字进行倒计时 2、让多个数字进行倒计时 3、让一个数组倒计时 4、优化倒计时的方法 5、把数字换成HH:ss的格式 这里我就直接上 ...

@蝮蛇之殇 之前帮一个群员解决倒计时的问题,分享过来给大家看看

老规矩先说思路

1、让数字进行倒计时
2、让多个数字进行倒计时
3、让一个数组倒计时
4、优化倒计时的方法


5、把数字换成HH:ss的格式

这里我就直接上解决的代码

wxml代码

<view>
  <view wx:for="{{total_micro_second}}">
    <view class='row'>
      <view>{{total_micro_second[index].t}}</view>
      <view data-index='{{index}}' bindtap='timeZT'>{{item.ztText}}</view>
      <view data-index='{{index}}' bindtap='timeStop'>{{item.tzText}}</view>
    </view>
  </view>
</view>

js代码

Page({
  /**
   * 页面的初始数据
   */
  data: {
    total_micro_second: []
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    var time = this.data.total_micro_second
    var total_micro_second = "00:29";    //表示60秒倒计时,想要变长就把60修改更大
    var total_micro_second2 = "00:35";
    var date = {}
    date.t = total_micro_second
    date.f = true
    date.ztText = "暂停"
    date.tzText = "停止"
    time.push(date)
    var date2 = {}
    date2.t = total_micro_second2
    date2.f = true
    date2.ztText = "暂停"
    date2.tzText = "停止"
    time.push(date2)
    console.log("入前", time)
//这里是组装数据,也可以直接在data里面写死,实际情况是根据查询的结果进行生成
    this.setData({
      total_micro_second: time
    })
    setTimeout(function () {
      for (var i in time) {
        count_down(that, i);
      }
    }, 1000)
  },
  //时间暂停
  timeZT: function (e) {
    var index = e.currentTarget.dataset.index
    var times = this.data.total_micro_second
    console.log("暂停", index)
    console.log("暂停的数据", times[index])
    console.log(times[index].t)
    if (times[index].t != "00:00") {
      if (times[index].f) {
        times[index].f = false
        times[index].ztText = "继续"
      } else {
        times[index].f = true
        times[index].ztText = "暂停"
      }
      this.setData({
        total_micro_second: times
      })
    }
  },
  timeStop: function (e) {
    var index = e.currentTarget.dataset.index
    var times = this.data.total_micro_second
    console.log("停止", index)
    console.log("停止的数据", times[index])
    if (times[index].f) {
      times[index].f = false
      times[index].tzText = "已停止"
      times[index].t = "00:00"
    }
    // else {
    //   times[index].f = true
    //   times[index].t = "00:20"
    //   times[index].tzText = "停止"
    // }
    this.setData({
      total_micro_second: times
    })
  }
})
function count_down(that, i) {
  var times = that.data.total_micro_second
  console.log(i, times)
  if (times[i].f) { //为true
    var tim = times[i].t.split(":");
    var second = parseInt(tim[0]) * 60 //分钟
    second += parseInt(tim[1]) //秒
    //console.log("总时间", second)
    if (second <= 0) { //可能存在2秒内的误差
      times[i].t = "00:00"
      times[i].f = false
      that.setData({
        total_micro_second: times
      });
      i = "S"
      return;
    }
    second -= 1
    var min = parseInt(second / 60)
    var sec = second - parseInt(second / 60) * 60
    times[i].t = fill_zero_prefix(min) + ":" + fill_zero_prefix(sec)
    that.setData({
      total_micro_second: times
    });
  }
  // // 放在最后--
  if (i != "S") {
    setTimeout(function () {
      count_down(that, i);
    }, 1000)
  }
}
// 位数不足补零
function fill_zero_prefix(num) {
  return num < 10 ? "0" + num : num
}

app.wxss样式(我所有项目都会有这个)

/**
* 下划线
*/
//红色下划线
.U_red {
  padding-bottom: 2rpx;app.wxss样式(我所有项目都会有这个)
  border-bottom: 1px solid red;
}
//黑色下划线
.U_black {
  padding-bottom: 2rpx;
  border-bottom: 1px solid black;
}
//黑色上划线
.U_black_top {
  padding-bottom: 2rpx;
  border-top: 1px solid black;
}
//白色下划线
.U_white {
  padding-bottom: 2rpx;
  border-bottom: 1px solid white;
}
/**
* Test class
*/
//黑色边框
.border_black {
  border: 1rpx solid black;
}
//红色边框
.border_red {
  border: 1rpx solid red;
}
//白色圆角
.border_white {
  border: 1rpx solid white;
  border-radius: 30rpx;
}
//布局
.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
//布局
.row_c {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
//布局
.row_content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
//布局
.column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
//黑色
.bk {
  color: black;
}
//字体加粗
.b_font {
  font-weight: 600;
}

tip:
1、如有遇到新问题,可以在下方留言或者加QQ群437729329 进行咨询
2、如果有优化的童鞋可以在下方留言
3、如果有封装好的,也可以在下方留言

本文作者:小程序社区博主ETL
原文地址:微信小程序之倒计时-微信小程序联盟/博主专区-微信小程序开发社区-微信小程序联盟
 
鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: ETL

相关阅读

  • Rolan 2017-12-19 14:45
  • tjn470812009 2018-1-22 20:18
    写的太乱了,根本不能用
  • ETL 2018-3-22 10:58
    tjn470812009 发表于 2018-1-22 20:18
    写的太乱了,根本不能用

    你扣扣多少,我看看原因
  • 天下钞票 2018-3-27 11:29
    下载测试可用,但是,我想问,为什么函数function count_down(that, i) 要传整个that,感觉有点像让我给你送一车水果,你只用2个苹果,其他都丢掉了的感觉。

    懒癌发作,没测试把that改为那个数组传进去怎么样,楼主这么做是基于什么考量呢?
  • ETL 2018-4-2 09:50
    天下钞票 发表于 2018-3-27 11:29
    下载测试可用,但是,我想问,为什么函数function count_down(that, i) 要传整个that,感觉有点像让我给你 ...

    因为count_down写在Page外面,而我需要在count_down里面进行setData,不将that传进去就无法赋值。
  • wangxun1990829 2018-9-4 15:15
    怎么设置小时呢

查看全部评论>>