小程序倒计时

相信写过js的小伙伴都很熟悉倒计时函数封装,小程序的倒计时函数封装其实和js一样,微信的集成环境支持js和jquery,所以会js的小伙伴可以放心大胆的写,我这里就先抛砖引玉了,如果有好的想法,大家可以多交流!!!

const app = getApp();

import { Bargain } from 'bargain-model.js';

var bargain = new Bargain(); //实例化 model 对象

Page({

/**

* 页面的初始数据

*/

data{

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (e) {

var that = this;

var goodid = e.goodid;//我这里是自己根据需要获得的参数
app.globalData.calculateTime = 0;//时间计算辅助时间戳

//获取商品信息

bargain.getInfo(goodid,res=>{//这里是我根据参数去获取结束时间,bargain是我新定义的类名,getInfo是我调用bargain-model.js里的方法,这里是去请求后台接口获取结束时间,如果看不懂可以去前面几篇文章里找一下model类调用封装

if(res){

var endTime = res.end_time;

app.globalData.endTime = endTime;//将结束时间设置为全局变量
var nowTime = res.nowTime;
app.globalData.nowTime = nowTime;//将服务器开始时间设为全局

}

that.countTime();//执行倒计时函数

})

},



/**倒计时函数 */
  countTime:function() {
    var endTime = app.globalData.endTime//获取结束时间
    var nowTime = app.globalData.nowTime        //  获取开始时间
    // console.log("当前服务器时间:" + nowTime);
    var calculateTime = app.globalData.calculateTime  //  获取辅助计算时间
    //获取开始时间
    var date = new Date(nowTime.replace(/-/g, '/'));
    var now = date.getTime();
    // console.log("当前时间:" + now);
    //获取截止时间
    var endDate = new Date(endTime.replace(/-/g, '/'));//将后台格式化时间里的连接符-改成/,兼容苹果手机
    var end = endDate.getTime();
    // console.log("结束时间:"+endDate);
    //时间差
    var leftTime = end - now - calculateTime;
    app.globalData.calculateTime = Number(calculateTime) + Number(1000);
    //定义变量 d,h,m,s保存倒计时的时间
    var d, h, m, s;
    if(leftTime >= 0) {
      d = checkTime(Math.floor(leftTime / 1000 / 60 / 60 / 24));
      h = checkTime(Math.floor(leftTime / 1000 / 60 / 60 % 24));
      m = checkTime(Math.floor(leftTime / 1000 / 60 % 60));
      s = checkTime(Math.floor(leftTime / 1000 % 60));
    } else {
      d = checkTime(0);
      h = checkTime(0);
      m = checkTime(0);
      s = checkTime(0);

      //触发模板消息

    }

    function checkTime(i) { //将0-9的数字前面加上0，例1变为01
      if (i < 10) {
        i = "0" + i;
      }
      return i;
    }

    var current_time = d + "天" + h + "时" + m + "分" + s + "秒";//拼接倒计时时间
    //渲染获取的时间
    this.setData({
      current_time: current_time
    })
    setTimeout(this.countTime,1000);//每一秒种执行一次倒计时函数
  },



})

 

各位小伙伴如果有什么不懂的可以加微信object_1995好友交流,另外欢迎大佬批评指正.

转载请附说明,谢谢