2022-09-26 工作记录--React-js将时间戳转换成“时分秒”+“时分秒”的倒计时（含tab切换）

一、实现效果

假如后端返了两个数据：当前时间的13位时间戳currentTimestamp、秒抢时间的13位时间戳seckillTimestamp，想实现“距开始秒抢”的倒计时，即：秒抢时间与当前时间之间的时间差以“时分秒”的形式进行倒计时，如下动图：

二、实现方式

第一步、封装方法——`js`将时间戳转换成“时分秒” ⭐️

【注意】：是“时分秒”，不是 “天时分秒”哦~ （二者写法是有区别滴哦）

utils.js：

/** 1、js获取 倒计时 时分秒通过时间戳的方式来 let h =  Math.trunc(dec / 3600); // 时let m =  Math.trunc(dec % 3600 / 60); // 分let s =  Math.trunc(dec % 3600 % 60); // 秒2、参数分析:@param {Num} inputTime: 需要转换成 时分秒 的 13位时间戳@param {Boolean} isPop: 便于实现两种返回结果：true -> `${h}小时${m}分${s}秒` ; false -> 包含时分秒的finalDateObj对象*/
export function timestampFormatter(inputTime, isPop = false) {// 最终时间结果对象const finalDateObj = {h: null, // 小时m: null, // 分钟s: null, // 秒}// 剩余时间总的毫秒数 除以 1000 变为总秒数（时间戳为13位 需要除以1000，为10位 则不需要）let dec = inputTime / 1000;if (dec <= 0) {dec = 0;}// 得到小时 格式化成前缀加零的样式let h = Math.trunc(dec / 3600);h = h < 10 ? '0' + h : h;// 得到分钟 格式化成前缀加零的样式let m = Math.trunc(dec % 3600 / 60);m = m < 10 ? '0' + m : m;// 得到秒 格式化成前缀加零的样式let s = Math.trunc(dec % 3600 % 60);s = s < 10 ? '0' + s : s;finalDateObj.h = h;finalDateObj.m = m;finalDateObj.s = s;return isPop ? `${h}小时${m}分${s}秒` : finalDateObj;
}

第二步、实现“时分秒”的倒计时

实现思路同我的另外一篇博文，相比其代码，只是有两处区别，如下：

countDownComponent.jsx

这是含倒计时的子组件。

1、倒计时初始值

参考项目代码：

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

现项目代码： ⭐️

// 1、初始化state
state = { canCountDown: true, // 判断是否开启定时器h1: '0', // 倒计时初始值-时h2: '0', // 倒计时初始值-时m1: '0', // 倒计时初始值-分m2: '0', // 倒计时初始值-分s1: '0', // 倒计时初始值-秒s2: '0', // 倒计时初始值-秒
}

2、获取到倒计时最终值【位于方法`updateTime`里】

参考项目代码：

/** 调用上面封装的方法timestampFormatter，计算到倒计时的展示结果，并state赋值，方便html里进行展示 */
const result = timestampFormatter(countDownTimestamp, true);
this.setState({finalDate: result,
})

现项目代码： ⭐️

/** 调用上面封装的方法timestampFormatter，计算到倒计时的展示结果，并state赋值，方便html里进行展示 */
const _h = timestampFormatter(countDownTime).h + '';
const _m = timestampFormatter(countDownTime).m + '';
const _s = timestampFormatter(countDownTime).s + '';
this.setState({h1: _h.slice(0, 1),h2: _h.slice(-1),m1: _m.slice(0, 1),m2: _m.slice(-1),s1: _s.slice(0, 1),s2: _s.slice(-1),
})

第三步、`HTML`渲染 ⭐️

render(){const { h1, h2, m1, m2, s1, s2 } = this.state;return(<div __examplenotes="倒计时" className="countDown"><span __examplenotes="倒计时背景" className="countDownBg"></span><span __examplenotes="时" className="commonTime hour1">{h1}</span><span __examplenotes="时" className="commonTime hour2">{h2}</span><span __examplenotes="分" className="commonTime minute1">{m1}</span><span __examplenotes="分" className="commonTime minute2">{m2}</span><span __examplenotes="秒" className="commonTime second1">{s1}</span><span __examplenotes="秒" className="commonTime second2">{s2}</span></div>)
}

三、坑

2022-09-26 工作记录--React-js将时间戳转换成“时分秒”+“时分秒”的倒计时（含tab切换）相关推荐

js实现时间戳转换成日期
1.页面多处都要使用时间戳转换,所以为了方便,直接写在main.js中,然后挂载到原型上 2.直接调用this.$get_date(时间戳) const get_date = (datetime) = ...
react中的时间戳转换成年-月-日时：分：秒
在react中有专门的包可以转换在react中使用得先导入moment : import moment from 'moment'; npm install --save moment 发表 ...
js将时间戳转换成正常时间格式两种方法
//将时间戳转换成正常时间格式2 function timestampToTime(timestamp) { var date = new Date(timestamp * 1 ...
js将时间戳转换成正常时间
//将时间戳转换成正常时间格式function timestampToTime(timestamp) {var date = new Date(timestamp * 1000);//时间戳为10位需 ...
js中时间戳转换成xxxx-xx-xx xx:xx:xx类型日期格式的做法
1.十三位数字的时间戳转换方法 var time = new Date(datetime).toLocaleString().replace(/年|月/g, "-").replac ...
js将时间戳转换成格林尼治时间
// 2019-03-26 05:00:00 function formatDateT(dataTime) { var timestamp = dataTime;var newDate = new D ...
2022-07-20 工作记录--React-js将时间戳转换成“天时分秒” + “天时分秒”的倒计时
一.实现效果假如后端返了两个数据:当前时间的13位时间戳currentTimestamp.到期时间的13位时间戳expireTimestamp,想实现"还有多久到期的时间"的倒计 ...
5.26——工作记录
5.26--工作记录前言过程总结重点前言目标:1.准备查询的基础sql 2.查询页面, 3.点击设备编码按钮的显示 4.图片过程 deviceStatusPerceptionEventI ...
js中将字符串转换成json的三种方式
ECMA-262(E3) 中没有将JSON概念写到标准中,还好在 ECMA-262(E5) 中JSON的概念被正式引入了,包括全局的JSON对象和Date的toJSON方法. 1,eval方式解析,恐 ...

2022-09-26 工作记录--React-js将时间戳转换成“时分秒”+“时分秒”的倒计时（含tab切换）

一、实现效果

二、实现方式

第一步、封装方法——`js`将时间戳转换成“时分秒” ⭐️

第二步、实现“时分秒”的倒计时

1、倒计时初始值

2、获取到倒计时最终值【位于方法`updateTime`里】

第三步、`HTML`渲染 ⭐️

三、坑

2022-09-26 工作记录--React-js将时间戳转换成“时分秒”+“时分秒”的倒计时（含tab切换）相关推荐

最新文章

热门文章

2022-09-26 工作记录--React-js将时间戳转换成“时分秒”+“时分秒”的倒计时（含tab切换）

一、实现效果

二、实现方式

第一步、封装方法——js将时间戳转换成“时分秒” ⭐️

第二步、实现“时分秒”的倒计时

1、倒计时初始值

2、获取到倒计时最终值【位于方法updateTime里】

第三步、HTML渲染 ⭐️

三、坑 insertAdIfNeeded();

2022-09-26 工作记录--React-js将时间戳转换成“时分秒”+“时分秒”的倒计时（含tab切换）相关推荐

最新文章

热门文章

第一步、封装方法——`js`将时间戳转换成“时分秒” ⭐️

2、获取到倒计时最终值【位于方法`updateTime`里】

第三步、`HTML`渲染 ⭐️

三、坑