react中实现根据接口返回的毫秒数,显示倒计时:还剩于00分00秒
import React,{ Component } from 'react';
class OrderDetail extends Component{
constructor(props){
super(props)
this.state={
msg:""
}
}
timeTransition = (ms) => {
let maxtime = ms / 1000; //按秒计算
let timer = null;
let _this = this;
setTimeout(function f(){
if (maxtime >= 0) {
let minutes = Math.floor(maxtime / 60);
let seconds = Math.floor(maxtime % 60);
minutes < 10 ? minutes = '0' + minutes : minutes = minutes;
seconds < 10 ? seconds = '0' + seconds : seconds = seconds;
let msg = "请在 <em>" + minutes + "分" + seconds + "秒</em> 内完成支付";
_this.setState({
msg
});
--maxtime;
} else{
_this.setState({
msg:'订单已过期,请重新下单'
});
clearTimeout(timer);
return;
}
timer = setTimeout(f,1000);
},1000);
}
componentDidMount(){
this.timeTransition(20000);//根据接口返回的时间
}
}
export default OrderDetail;
时间转换修正:
timeTransition = (ms) => {
let maxtime = ms / 1000; //按秒计算
let timer = null;
let _this = this;
console.log(maxtime)
setTimeout(function f(){
if (maxtime >= 0) {
var day = Math.floor( maxtime/ (24*3600) ); // Math.floor()向下取整
var hour = Math.floor( (maxtime - day*24*3600) / 3600);
var minute = Math.floor( (maxtime - day*24*3600 - hour*3600) /60 );
var second = maxtime - day*24*3600 - hour*3600 - minute*60;
let msg = "请在 <em>"+day+'天'+hour+'时'+ minute + "分" + second + "秒</em> 内完成支付";
console.log(msg)
_this.setState({
day:day,
hour:hour,
minutes:minute,
seconds:second
});
--maxtime;
} else{
_this.setState({
msg:'订单已过期,请重新下单'
});
clearTimeout(timer);
return;
}
timer = setTimeout(f,1000);
},1000);
}
function secondsFormat( s ) { //换算参考 上面并没调用这个方法
var day = Math.floor( s/ (24*3600) ); // Math.floor()向下取整
var hour = Math.floor( (s - day*24*3600) / 3600);
var minute = Math.floor( (s - day*24*3600 - hour*3600) /60 );
var second = s - day*24*3600 - hour*3600 - minute*60;
return day + "天" + hour + "时" + minute + "分" + second + "秒";
}
console.log(secondsFormat(5555555)) // 64天7时12分35秒
console.log(secondsFormat(1234)) // 0天0时20分34秒