小程序学习：倒计时案例

最新推荐文章于 2025-06-14 09:48:05 发布

原创最新推荐文章于 2025-06-14 09:48:05 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

前端笔记同时被 2 个专栏收录

165 篇文章

订阅专栏

小程序

10 篇文章

订阅专栏

小程序自学网站推荐：http://www.51zxw.net/study.asp?vip=4857021

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



  },

 
})

效果：