小程序倒计时

1.wxml

1.时间戳转换成时间格式倒计时:
<view style='margin:10px 20px'>
  倒计时:<text>{{hhh1}}:{{mmm1}}:{{sss1}}</text>
</view>
2.倒计时60秒
<view style='margin:10px 20px'>
  倒计时:<text>{{time}}s</text>
</view>
3.毫秒转成时分秒倒计时
<view style='margin:10px 20px'>
  倒计时:<text>{{hhh3}}:{{mmm3}}:{{sss3}}</text>
</view>

2.js

var that;
var test_number = 60;
Page({
  /**
   * 页面的初始数据
   */
  data: {

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    that = this;

    //1.时间戳转换成时间格式倒计时:
    var countDown_time = new Date().getTime();
    that.count_down1(that.timestampToTime(countDown_time));
    // that.count_down("00:01:10");

    //2.倒计时60秒
    that.count_down2();

    //3.毫秒转成时分秒倒计时(php的时间戳)
    that.count_down3(84557095);
  },
  //1.时间戳转换成时间格式倒计时:
  count_down1: function(countDown_time) {
    var time = countDown_time.split(':')
    var hhh = parseInt(time[0]);
    var mmm = parseInt(time[1]);
    var sss = parseInt(time[2]);
    that.setData({
      sss1: (sss < 10) ? '0' + sss : sss,
      mmm1: (mmm < 10) ? '0' + mmm : mmm,
      hhh1: (hhh < 10) ? '0' + hhh : hhh
    });
    var Interval = setInterval(function() {
      if (sss > 0) {
        sss--
      } else {
        if (sss == 0 && mmm == 0 && hhh == 0) {
          clearInterval(Interval);
          console.log('时间到');
        }
      }

      if (sss == 0) {
        if (mmm > 0) {
          mmm--
          sss = 59;
        }
        if (mmm == 0 && hhh > 0) {
          hhh--
          sss = 59;
          mmm = 59;
        }
      }
      that.setData({
        sss1: (sss < 10) ? '0' + sss : sss,
        mmm1: (mmm < 10) ? '0' + mmm : mmm,
        hhh1: (hhh < 10) ? '0' + hhh : hhh
      });
    }, 1000);
  },
  timestampToTime: function(timestamp) {
    var date = new Date(timestamp); //时间戳为10位需*1000,时间戳为13位的话不需乘1000
    var h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
    var m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
    var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
    return h + m + s;
  },
  //2.倒计时60秒
  count_down2: function() {
    var timer = setInterval(function() {
      test_number--
      if (test_number > 0) {
        that.setData({
          time: test_number
        });
      } else {
        that.setData({
          time: 0
        });
        console.log('我已经到0了');
        clearInterval(timer);
      }
    }, 1000);
  },
  //3.毫秒转成时分秒倒计时
  count_down3: function(countDown_time) {
    var days = parseInt(countDown_time / (1000 * 60 * 60 * 24));
    var hours = parseInt((countDown_time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = parseInt((countDown_time % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = (countDown_time % (1000 * 60)) / 1000;
    var aaaa = hours + ":" + minutes + ":" + seconds;
    var time = aaaa.split(':');
    var hhh = parseInt(time[0]);
    var mmm = parseInt(time[1]);
    var sss = parseInt(time[2]);
    that.setData({
      sss3: (sss < 10) ? '0' + sss : sss,
      mmm3: (mmm < 10) ? '0' + mmm : mmm,
      hhh3: (hhh < 10) ? '0' + hhh : hhh
    })
    var Interval = setInterval(function() {
        if (sss > 0) {
          sss--
        } else {
          if (sss && mmm && hhh == 0) {
            clearInterval(Interval)
            console.log('时间到')
          }
        }
        if (sss == 0) {
          if (mmm > 0) {
            mmm--
            sss = 59;
          }
          if (mmm == 0 && hhh > 0) {
            hhh--;
            sss = 59;
            mmm = 59;
          }
        }
        that.setData({
          sss3: (sss < 10) ? '0' + sss : sss,
          mmm3: (mmm < 10) ? '0' + mmm : mmm,
          hhh3: (hhh < 10) ? '0' + hhh : hhh
        })
      },
      1000)
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },
})

3.效果

4.转载地址:https://blog.csdn.net/qq_35713752/article/details/79677610

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值