小程序学习:倒计时案例

wxml:

<button bindtap='begin'  type='warn'>开始</button>

<view>{{time}}</view>

wxss:

button{
    font-size:30px;
}

view{
    text-align: center;
    margin-top: 100rpx;
    font-size:30px;
    color: #ff6000;
}

js:

var allMil = 48;   //48小时倒计时
allMil = allMil*3600*1000;


function toTow(num){
    if (num<10){
        return "0"+num;
    }else{
        return num;
    }
};

function format(mil){
    var allSecond = Math.floor(mil/1000);     //    总的秒数
    var h = Math.floor(allSecond / 3600);   //    时
    var m = Math.floor((allSecond - h * 3600) / 60);    //    分
    var s = Math.floor(allSecond - h * 3600 - m * 60);     //    秒

    h = toTow(h);   //    时
    m = toTow(m);      //    分
    s = toTow(s);      //    秒

    return h + ":" + m + ":"+s ;
};



Page({


  data: {
      time:"本次活动已结束!",
  },

  begin:function(){

      var temp = format(allMil);

      this.setData({
          time: temp,
      });

      if (allMil<0){

          this.setData({
              time: "本次活动已结束!",
          });
            return;
        };

       setTimeout(
           ()=>{
               allMil-=1000;
               this.begin();
           },1000
       );



  },

 
})

效果:


猜你喜欢

转载自blog.csdn.net/qq_32584661/article/details/80576762