设定一个值跟时间,可选格式化数字(每三位加个逗号),可自定义className
<ActiveNumber className="data-number" value={126560} delay={1000} formatNumber />
返回一个span标签
import React, {Component} from 'react';
import PropTypes from 'prop-types';
class ActiveNumber extends Component {
state = {
currentNumber: 0,
showNumber: 0
};
constructor(props) {
super(props);
}
componentDidMount() {
let { delay=300, value=0, formatNumber=false } = this.props;
// console.log(delay, value);
let time = delay / value;
let step, stepCount;
// 最短每30ms为一帧
if(time > 30) {
step = value / delay;
stepCount = delay / time;
} else {
time = 30;
stepCount = delay / 30;
step = value / stepCount;
}
console.log('time', time);
console.log('expectStep', step);
console.log('stepCount', stepCount);
// return ;
let startTime = new Date();
let decrease = step / stepCount;
// let change = step * 2;
let change = step * 1.5;
this.interval = setInterval(() => {
// console.log(change);
change = change > 1 ? change: 1;
let currentNumber = this.state.currentNumber + change;
currentNumber = currentNumber > value ? value: currentNumber;
if(currentNumber >= value) {
clearInterval(this.interval);
let endTime = new Date();
console.log('实际耗时:', endTime - startTime);
}
this.setState({ currentNumber });
const showNumber = currentNumber.toString().split('.')[0];
if(formatNumber) this.setState({ showNumber: this.fomatNumber(showNumber)});
else this.setState({ showNumber });
change -= decrease;
}, time)
}
/**
* 数字每三位加逗号
* @param numberOrString
* @returns {string}
*/
fomatNumber = numberOrString => {
let str = String(numberOrString);
let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
return str.replace(reg,"$1,");
}
componentWillMount() {
clearInterval(this.interval);
}
render() {
let { className='' } = this.props;
return (
<span className={className}>
{this.state.showNumber}
</span>
);
}
}
export default ActiveNumber;
ActiveNumber.propTypes = {
className: PropTypes.string,
delay: PropTypes.number,
formatNumber: PropTypes.bool,
value: PropTypes.number.isRequired
};
ActiveNumber.defaultProps = {
className: '',
delay: 300,
formatNumber: false,
value: 0
};
demo:https://codepen.io/lister/pen/gJZLry?editors=1111