zoukankan      html  css  js  c++  java
  • 【小程序】倒计时

    wxml

    <view class='name' wx:if="{{countDown}}">
          <view class='name_left'>FENDI</view>
          <view class='name_right'>活动结束:{{day}}天 <text>{{hou}}</text>:<text>{{min}}</text>:<text>{{sec}}</text></view>
        </view>
    

    wxss

    .name_right{400rpx;font-size:24rpx;color:#F9524A;text-align:right;}
    .name_right text{background:#F9524A;border-radius:6rpx;color:#fff;padding:2rpx 6rpx;}
    

    js

    data: {
        endTime: '2018-11-22 10:40:30'//2018/11/22 10:40:30这种格式也行
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var that = this;
        that.countDown()
      },
    // 倒计时
      countDown:function(){
        var that=this;
        var nowTime = new Date().getTime();//现在时间(时间戳)
        var endTime = new Date(that.data.endTime).getTime();//结束时间(时间戳)
        var time = (endTime-nowTime)/1000;//距离结束的毫秒数
        // 获取天、时、分、秒
        let day = parseInt(time / (60 * 60 * 24));
        let hou = parseInt(time % (60 * 60 * 24) / 3600);
        let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
        let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
        // console.log(day + "," + hou + "," + min + "," + sec)
        day = that.timeFormin(day),
        hou = that.timeFormin(hou),
        min = that.timeFormin(min),
        sec = that.timeFormin(sec)
        that.setData({
          day: that.timeFormat(day),
          hou: that.timeFormat(hou),
          min: that.timeFormat(min),
          sec: that.timeFormat(sec)
        })
        // 每1000ms刷新一次
        if (time>0){
          that.setData({
            countDown: true
          })
          setTimeout(this.countDown, 1000);
        }else{
          that.setData({
            countDown:false
          })
        }
      },
      //小于10的格式化函数(2变成02)
      timeFormat(param) {
        return param < 10 ? '0' + param : param;
      },
      //小于0的格式化函数(不会出现负数)
      timeFormin(param) {
        return param < 0 ? 0: param;
      },
    

      

     

  • 相关阅读:
    浅析 Java 中的 final 关键字
    谷歌Java编程风格指南
    分布式事务之两阶段提交协议(2PC)and 使用事件和消息队列实现分布式事务
    零和博弈与木桶定律
    Executors类创建四种常见线程池
    软件设计的原则&101个设计模式-2011年04月25日 陈皓
    编程中的命名设计那点事-陈皓
    从面向对象的设计模式看软件设计- 2013年02月01日 陈皓
    SQL语句
    分布式事务
  • 原文地址:https://www.cnblogs.com/fengyinghui/p/12907003.html
Copyright © 2011-2022 走看看