跟窝一起学习鸭~~

//index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App.jsx';

import registerServiceWorker from './registerServiceWorker';

ReactDOM.render( < App / > , document.getElementById('root'));

registerServiceWorker();

//app.jsx根App

import React, {

Component

} from 'react';

import TotalQty from './components/TotalQty'

class App extends Component {

render() {

return (

)

}

}

export default App;

//TotalQty.jsx

import React, { Component } from 'react'

import './totalQty.less'

import FlipOverCounter from './flipOver/FlipOverCounter'

export class TotalQty extends Component {

// 父组件先定义state通过props传值

constructor(props) {

super(props)

//定义初始的值最小为50 长度这个日历是7位数

// 时间是60000ms更新一次吗？

this.state = {

min: 50,

max: 0,

time: 60000,

len: 7

}

}

componentDidMount() {

const a = 100;

//a是什么东西，为了设置最大值为50+100吗？

const ths = this;

ths.setState({

max: ths.state.max + a

})

//每这个时间60000就清除一次定时器

this.time1 = setInterval(function () {

ths.setState({

max: ths.state.max + a,

min: ths.state.max

})

}, 60000)

}

render() {

const { min, max, time, len } = this.state;

return (

)

}

}

export default TotalQty

//翻页FlipOverCounter.jsx

//有些代码不是很懂，但是小姐姐很赞，我很喜欢写这个代码的小姐姐

//FlipOverCounter.jsx

import React, { Component } from 'react'

import PropTypes from 'prop-types'

import './flipOverCounter.less'

export class FlipOverCounter extends Component {

constructor(props) {

super(props)

//通过props接收父组件传过来的值

this.state = {

min: props.min,

max: props.max,

time: props.time,

len: props.len,

currentNums: this.zfill(props.min)

}

this.resetNo = this.resetNo.bind(this)

this.run = this.run.bind(this)

}

componentDidMount() {

//页面挂载就挂载resetNo

this.resetNo()

}

//补0zfill传入值

zfill(num) {

var s = "000000000" + num;

// 当长度到什么的时候就传入的值？

return s.toString().substr(s.length - this.props.len).split("");

}

//初始化数值填入

resetNo() {

const { min } = this.state;

// 当前的值

const currentNums = this.zfill(min)

this.setState({ currentNums }, function () {

this.run()

})

}

//初始化执行

run() {

const { min, max, time, currentNums } = this.state;

const difference = max - min;

if (difference < 1) return;

//每次要执行动画的时间

let t = Math.round(time / difference);

let speedTyp = 'normal'

//执行速度class 定义了2种不同程度的速度控制样式

if (t >= 300) {

if (t > 1500) t = 1500;

speedTyp = 'normal'

} else {

if (t < 100) t = 100;

speedTyp = 'quick'

}

let newCount = min;

//翻页

function increase() {

if (newCount === max || newCount > max) {

clearInterval(this.timer1);

return false;

}

//慢速一页页翻

if (speedTyp === 'normal') {

newCount++;

} else {

if (difference > 800 && t <= 200) {

t = 200;

//直接设置数字

newCount = newCount + Math.floor(difference / (time / 200))

} else {

//快速翻

newCount = newCount + 2

}

}

const newNums = this.zfill(newCount)

this.setState({ speedTyp, currentNums: newNums })

}

//执行翻页

if (this.timer1) clearInterval(this.timer1);

this.timer1 = setInterval(increase.bind(this), t);

}

componentWillReceiveProps(props) {

//resetNo()重新

if (Object.keys(props)) {

//props值改变，重新在setState

if (props.max !== this.state.max) {

this.setState({

min: props.min,

max: props.max,

time: props.time,

len: props.len

}, function () {

this.resetNo()

})

}

}

}

render() {

const { len, currentNums } = this.state;

// 这边看不懂

const flipItems = currentNums.map((value, idx) => {

let preIndx = value === "0" ? 9 : value * 1 - 1;

return (

)

})

return (

)

}

}

//静态类型检验

FlipOverCounter.propTypes = {

min: PropTypes.number, //初始数值

max: PropTypes.number, //最大数字

time: PropTypes.number, //翻页总时长

len: PropTypes.number //数字是几位数

}

FlipOverCounter.defaultProps = {

min: 0,

max: 0,

time: 120000,

len: 6

}

export default FlipOverCounter