相信写过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好友交流,另外欢迎大佬批评指正.
转载请附说明,谢谢