knk
Version:
react components based on react
83 lines (82 loc) • 3.04 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { useSetState } from 'ahooks';
var CountDown = function CountDown(props) {
var endTime = props.endTime,
endText = props.endText,
prefixText = props.prefixText,
suffixText = props.suffixText;
var _useSetState = useSetState({
time: 0,
day: 0,
hour: 0,
min: 0,
sec: 0
}),
_useSetState2 = _slicedToArray(_useSetState, 2),
state = _useSetState2[0],
setState = _useSetState2[1];
useEffect(function () {
countdowm(endTime);
}, []);
var countdowm = function countdowm(timestamp) {
var timer = setInterval(function () {
var nowTime = new Date();
var endTime = new Date(timestamp * 1000);
var time = endTime.getTime() - nowTime.getTime();
if (time > 0) {
var _day = Math.floor(time / 86400000);
var _hour = Math.floor(time / 3600000 % 24);
var _min = Math.floor(time / 60000 % 60);
var _sec = Math.floor(time / 1000 % 60);
_day = _day < 10 ? '0' + _day : _day;
_hour = _hour < 10 ? '0' + _hour : _hour;
_min = _min < 10 ? '0' + _min : _min;
_sec = _sec < 10 ? '0' + _sec : _sec;
setState({
time: time,
day: _day,
hour: _hour,
min: _min,
sec: _sec
});
} else {
setState({
time: time
});
clearInterval(timer);
}
}, 1000);
};
var time = state.time,
day = state.day,
hour = state.hour,
min = state.min,
sec = state.sec;
return /*#__PURE__*/React.createElement("span", null, endText && time < 0 ? /*#__PURE__*/React.createElement("span", null, endText) : /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", null, prefixText), /*#__PURE__*/React.createElement("span", {
className: "count-item"
}, day), /*#__PURE__*/React.createElement("span", null, "\u5929"), /*#__PURE__*/React.createElement("span", {
className: "count-item"
}, hour), /*#__PURE__*/React.createElement("span", null, "\u65F6"), /*#__PURE__*/React.createElement("span", {
className: "count-item"
}, min), /*#__PURE__*/React.createElement("span", null, "\u5206"), /*#__PURE__*/React.createElement("span", {
className: "count-item"
}, sec), /*#__PURE__*/React.createElement("span", null, "\u79D2"), /*#__PURE__*/React.createElement("span", null, suffixText)));
};
CountDown.defaultProps = {
endTime: new Date('2023-05-10 15:52:59').getTime() / 1000,
endText: '',
prefixText: '',
suffixText: ''
};
CountDown.propTypes = {
endTime: PropTypes.number,
// 10位时间戳
endText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
// 结束文案
prefixText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
// 前置文案
suffixText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]) // 后置文案
};
export default CountDown;