特效描述:js css3翻页数字时钟。js获取本地时间数字时钟翻页动画代码。
代码结构
1. 引入JS
2. HTML代码
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var AnimatedCard = function (_React$Component) {
_inherits(AnimatedCard, _React$Component);
function AnimatedCard() {
_classCallCheck(this, AnimatedCard);
return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
}
AnimatedCard.prototype.render = function render() {
var _props = this.props;
var position = _props.position;
var digit = _props.digit;
var animation = _props.animation;
return React.createElement(
'div',
{ className: 'flipCard ' + position + ' ' + animation },
React.createElement(
'span',
null,
digit
)
);
};
return AnimatedCard;
}(ponent);
var StaticCard = function (_React$Component2) {
_inherits(StaticCard, _React$Component2);
function StaticCard() {
_classCallCheck(this, StaticCard);
return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments));
}
StaticCard.prototype.render = function render() {
var _props2 = this.props;
var position = _props2.position;
var digit = _props2.digit;
return React.createElement(
'div',
{ className: position },
React.createElement(
'span',
null,
digit
)
);
};
return StaticCard;
}(ponent);
var FlipUnitContainer = function (_React$Component3) {
_inherits(FlipUnitContainer, _React$Component3);
function FlipUnitContainer() {
_classCallCheck(this, FlipUnitContainer);
return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments));
}
FlipUnitContainer.prototype.render = function render() {
var _props3 = this.props;
var digit = _props3.digit;
var shuffle = _props3.shuffle;
var unit = _props3.unit;
var now = digit;
var before = digit - 1;
// to prevent a negative value
if (unit !== 'hours') {
before = before === -1 ? 59 : before;
} else {
before = before === -1 ? 23 : before;
}
// add zero
if (now < 10) now = '0' + now;
if (before < 10) before = '0' + before;
// shuffle digits
var digit1 = shuffle ? before : now;
var digit2 = !shuffle ? before : now;
// shuffle animations
var animation1 = shuffle ? 'fold' : 'unfold';
var animation2 = !shuffle ? 'fold' : 'unfold';
return React.createElement(
'div',
{ className: 'flipUnitContainer' },
React.createElement(StaticCard, {
position: 'upperCard',
digit: now
}),
React.createElement(StaticCard, {
position: 'lowerCard',
digit: before
}),
React.createElement(AnimatedCard, {
position: 'first',
digit: digit1,
animation: animation1
}),
React.createElement(AnimatedCard, {
position: 'second',
digit: digit2,
animation: animation2
})
);
};
return FlipUnitContainer;
}(ponent);
var FlipClock = function (_React$Component4) {
_inherits(FlipClock, _React$Component4);
function FlipClock(props) {
_classCallCheck(this, FlipClock);
var _this4 = _possibleConstructorReturn(this, _React$Component4.call(this, props));
_this4.state = {
hours: 0,
hoursShuffle: true,
minutes: 0,
minutesShuffle: true,
seconds: 0,
secondsShuffle: true
};
return _this4;
}
ponentDidMount = function componentDidMount() {
var _this5 = this;
this.timerID = setInterval(function () {
return _this5.updateTime();
}, 50);
};
ponentWillUnmount = function componentWillUnmount() {
clearInterval(this.timerID);
};
FlipClock.prototype.updateTime = function updateTime() {
// get new date
var time = new Date();
// set time units
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
// on hour chanage, update this.state.minutes
if (hours !== this.state.hours) {
var hoursShuffle = !this.state.hoursShuffle;
this.setState({
hours: hours,
hoursShuffle: hoursShuffle
});
}
// on minute chanage, update this.state.minutes
if (minutes !== this.state.minutes) {
var minutesShuffle = !this.state.minutesShuffle;
this.setState({
minutes: minutes,
minutesShuffle: minutesShuffle
});
}
// on second chanage, update this.state.seconds
if (seconds !== this.state.seconds) {
var secondsShuffle = !this.state.secondsShuffle;
this.setState({
seconds: seconds,
secondsShuffle: secondsShuffle
});
}
};
FlipClock.prototype.render = function render() {
var _state = this.state;
var hours = _state.hours;
var minutes = _state.minutes;
var seconds = _state.seconds;
var hoursShuffle = _state.hoursShuffle;
var minutesShuffle = _state.minutesShuffle;
var secondsShuffle = _state.secondsShuffle;
return React.createElement(
'div',
{ className: 'flipClock' },
React.createElement(FlipUnitContainer, {
unit: 'hours',
digit: hours,
shuffle: hoursShuffle
}),
React.createElement(FlipUnitContainer, {
unit: 'minutes',
digit: minutes,
shuffle: minutesShuffle
}),
React.createElement(FlipUnitContainer, {
unit: 'seconds',
digit: seconds,
shuffle: secondsShuffle
})
);
};
return FlipClock;
}(ponent);
var Header = function (_React$Component5) {
_inherits(Header, _React$Component5);
function Header() {
_classCallCheck(this, Header);
return _possibleConstructorReturn(this, _React$Component5.apply(this, arguments));
}
Header.prototype.render = function render() {
return React.createElement(
'header',
null,
React.createElement(
'h1',
null,
' React Flip Clock'
)
);
};
return Header;
}(ponent);
var App = function (_React$Component6) {
_inherits(App, _React$Component6);
function App() {
_classCallCheck(this, App);
return _possibleConstructorReturn(this, _React$Component6.apply(this, arguments));
}
App.prototype.render = function render() {
return React.createElement(
'div',
null,
React.createElement(Header, null),
React.createElement(FlipClock, null)
);
};
return App;
}(ponent);
ReactDOM.render(React.createElement(App, null), document.querySelector('#root'));
如果觉得《html显示时钟 翻页 js js css3翻页数字时钟代码》对你有帮助,请点赞、收藏,并留下你的观点哦!