We do a lot of the time there will be a countdown style, there are seconds of the countdown, minutes, hours, days and how many have been countdown
So, I summed up a countdown of how many days demo;
We create a dataTime.js file in the directory utils
File write function
export const getTimeLeft = function getTimeLeft(datetimeTo) { // Now calculate the target time difference (ms) let time1 = datetimeTo; let time2 = new Date().getTime(); if (time1 <= time2) return '(0 days remaining process 0:00)'; let mss = time1 - time2; // time difference (msec) in the format: minutes and seconds days 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 '(' + 'left' + days + "days" + hours + "when" + minutes + "min" + seconds + 's' + 'treatment' + ')' }
The introduction of this function in the file
import { getTimeLeft } from "../utils/dataTime.js";
Page({ data:{ datetimeTo:"", timeLeft:"" })
When we get the data from the interface, if the date format is 2020-02-31 15:06:57 this format, we try not to use the following format conversion, may lead on ios format after conversion NAN NAN second minute when an error occurs NAN NAN days
So, we can change a way
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) // acquired timestamp
If we countdown three days, then seven days or other times * 3 to change the value put on the line
var sevenDayLater = nndate * 1 + 86400 * 3 * 1000; // count the acquired timestamp next three days
this.setData ({
datetimeTo: sevenDayLater
})
When we get a time stamp after three days, using setInterval () is counting down and the current timestamp
isTimeHandler(startTime) { this.data.timer = setInterval(() => { this.setData({ timeLeft: getTimeLeft(this.data.datetimeTo)//使用了utils.getTimeLeft }); if (this.data.timeLeft == "0 days 0:00:00") { clearInterval(this.data.timer); } }, 1000); },
The introduction of this parameter in the page
<text>{{timeLeft}}</text>