2022-07-20 工作记录-React-js将时间戳转换成“天时分秒” + “天时分秒”的倒计时

假如后端返了两个数据：当前时间的13位时间戳currentTime、到期时间的13位时间戳expireTime，想实现“还有多久到期的时间”的倒计时，即：到期时间与当前时间之间的时间差以“天时分秒”的形式进行倒计时，如下动图：

utils.js：

function countDown(inputTime, isPop = false) {
  // 最终时间结果对象
  const finalDateObj = {
    d: null, // 天
    h: null, // 小时
    m: null, // 分钟
    s: null, // 秒
  }
  //剩余时间总的毫秒数 除以 1000 变为总秒数（时间戳为13位 需要除以1000，为10位 则不需要）
  let dec = inputTime / 1000;
  if (dec <= 0) {
    dec = 0;
  }
  //得到天 格式化成前缀加零的样式
  let d = parseInt(dec / 60 / 60 / 24);
  d = d < 10 ? '0' + d : d;
  //得到小时 格式化成前缀加零的样式
  let h = parseInt(dec / 60 / 60 % 24);
  h = h < 10 ? '0' + h : h;
  //得到分钟 格式化成前缀加零的样式
  let m = parseInt(dec / 60 % 60);
  m = m < 10 ? '0' + m : m;
  //得到秒 格式化成前缀加零的样式
  let s = parseInt(dec % 60);
  s = s < 10 ? '0' + s : s;

  finalDateObj.d = d;
  finalDateObj.h = h;
  finalDateObj.m = m;
  finalDateObj.s = s;
  
  // 两种返回结果
  return isPop ? `${d}天${h}小时${m}分${s}秒` : finalDateObj;
}

实现思路：⭐️

• 1、先在state里定义两个属性：
  • finalDate——倒计时初始值（初始化为字符串 “00天00时00分”），
  • canMountDown——判断是否开启定时器。
• 2、初始化定时器timer为null ；
• 3、定义一个方法FunTimer(里面写一个setInterval定时器timer，装实现倒计时的代码（我封装成了一个函数updateTime）)，
• 4、在componentDidMount里进行判断：
  • 若canMountDown为true，就调用方法FunTimer，并把canMountDown置为false；
  • 若canMountDown为false，就把timer定时器关了，并把canMountDown置为true；
• 5、编写函数updateTime：【实现倒计时的代码】
  • 第1步、获取到当前时间和过期时间；
  • 第2步、手动把获取到的当前时间 隔一秒加1s 得到新的当前时间；
  • 第3步、 引入上面封装好的方法countDown（js将时间戳转换成“天时分秒”），将到期时间与新的当前时间的差值传进去，获取到对应的“天时年分”，并赋值到state里的finalDate；
  • 第4步、将state里的finalDate写到html对应位置 就大功告成啦~
• 6、在componentWillUnmount里关闭定时器

tasksDetails.jsx：

【store相关的代码不完整，只可查看，不可复用哦，其就是与接口相关滴代码，小萝卜儿们根据自己平时的思路来即可~】

import React,{Component} from 'react';
import { countDown } from '@src/utils/utils'; // 引入上面封装好的方法——`js`将时间戳转换成“天时分秒”
import {store} from '@src/utils/store'; // 引入store【store相关的是我项目相关的，小萝卜儿们可根据实际情况处理】

class CountDown extends Component{

	// 1、初始化state
  	state = { 
    	canCountDown: true, // 判断是否开启定时器
   		finalDate: '00天00小时00分', // 倒计时初始值
  	}
  	
  	// 2、初始化定时器
    timer = null; 

	async componentDidMount() {
		await store.getQueryTasks(); // 调用接口-获取到任务列表里的数据

		// 4、是否开启倒计时处理
    	if (this.state.canCountDown) {
      		this.setState({ canCountDown: false })
      		this.FunTimer(); // 调用函数-倒计时
    	} else {
      		this.setState({ canCountDown: true })
      		clearInterval(this.timer); // 关闭定时器
    	}
  	}
  	
    // 6、在componentWillUnmount里关闭定时器
	componentWillUnmount() {
    	clearInterval(this.timer); // 关闭定时器
  	}
  
   	// 3、封装函数-倒计时
  	FunTimer = () => {
    	this.timer = setInterval(async () => {
      		// 想实现倒计时的代码就写在这里啦~【我单独封装了一个函数】
      		await this.updateTime();
    	}, 1000)
  	}

	// 5、更新时间
  	updateTime = () => {
    	const expireTimestamp = 1660970113000; // 到期时间【实际情况时 由后台返回，这儿写死只是做个测试】
    	const { timestamp } = store; // 获取到后台返的当前时间的时间戳【注意：这个要在store里单独进行处理哦】
    	
    	const timestamp1 = timestamp * 1 + 1000;
    	
    	const result = countDown(expireTimestamp * 1 - timestamp1 * 1, true);
    	this.setState({
      		finalDate: result,
    	})
    	
    	store.setTimestamp(timestamp1); 
  	}
    
    render(){
	    return(
		    

		       	 倒计时：{this.state.finalDate}
		   	
	   	)
	}
}
export default CountDown;

store/index.js：

【这里是处理接口的部分代码，代码不完整，不可直接复用】

import { makeAutoObservable } from 'mobx';
import API from '../api/index';

const store = makeAutoObservable({
  
  tasksList: {},
  
  timestamp: null,

  
  setTasksList(tasksList) {
    this.tasksList = tasksList;
  },
  
  setTimestamp(timestamp) {
    this.timestamp = timestamp;
  },

  
  async getQueryTasks() {
    const { data, success } = await API.queryTasks(); // 调用接口
    if (data && success) {
      this.setTasksList(data); // 设置任务列表数据
      this.setTimestamp(data.timestamp); // 设置 任务列表-当前时间的时间戳
    }
  },

});
export default store;