我们在做许多样式的时候都会有倒计时的,有秒倒计时的,分的,小时的,已以及多少天倒计时的
所以,总结了一个还有多少天倒计时的demo;
我们在utils目录中创建一个dataTime.js文件
文件写入函数
export const getTimeLeft = function getTimeLeft(datetimeTo) { // 计算目标与现在时间差(毫秒) let time1 = datetimeTo; let time2 = new Date().getTime(); if (time1 <= time2) return '(还剩0天0时0分处理)'; let mss = time1 - time2; // 将时间差(毫秒)格式为:天时分秒 let days = parseInt(mss / (1000 * 60 * 60 * 24)); let hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); let minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60)); let seconds = parseInt((mss % (1000 * 60)) / 1000); return '(' + '还剩' + days + "天" + hours + "时" + minutes + "分" + seconds + '秒' + '处理' + ')' }
在文件中引入这个函数
import { getTimeLeft } from "../utils/dataTime.js";
Page({ data:{ datetimeTo:"", timeLeft:"" })
当我们从接口拿到数据的时候,日期格式如果是 2020-02-31 15:06:57 这种格式的话 ,我们尽量不要用下面这种格式转换,有可能会导致转换之后的格式在ios上出现NAN天NAN时NAN分NAN秒的错误
所以,我们可以换一种方法
let arr = data.split(/[- :]/); let nndate = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4], arr[5]); nndate = Date.parse(nndate) //获取到的时间戳
如果我们的倒计时是三天的话,七天或者是其他时间 就把 *3改变值就行
var sevenDayLater = nndate * 1 + 86400 * 3 * 1000; //获取到的时间戳往后算三天时间
this.setData({
datetimeTo:sevenDayLater
})
当我们拿到三天后的时间戳,使用 setInterval() 与当前时间戳进行倒计时
isTimeHandler(startTime) { this.data.timer = setInterval(() => { this.setData({ timeLeft: getTimeLeft(this.data.datetimeTo)//使用了utils.getTimeLeft }); if (this.data.timeLeft == "0天0时0分0秒") { clearInterval(this.data.timer); } }, 1000); },
在页面引入这个参数值
<text>{{timeLeft}}</text>