修改代码

package.json

@@ -20,5 +20,10 @@
   "devDependencies": {
     "react-scripts": "3.4.0"
   },
-  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

src/components/Computer.css

@@ -0,0 +1,14 @@
+li{ list-style:none;}
+#ul1{ margin:20px auto; border:1px #FFF solid; border-bottom:none; border-right:none; overflow:hidden; background-image:url(./img/bg.jpg); background-size:cover;}
+#ul1 li{ float:left; border:1px #FFF solid; border-top:none; border-left:none; background-size:cover;}
+#ul1 li.active{ animation:0.5s linear infinite flash; -webkit-animation:0.5s linear infinite flash;}
+@keyframes flash{
+    0%{ opacity:0.1;}
+    50%{ opacity:1;}
+    100%{ opacity:0.1;}
+}
+@-webkit-keyframes flash{
+    0%{ opacity:0.1;}
+    50%{ opacity:1;}
+    100%{ opacity:0.1;}
+}

src/components/Computer.js

@@ -0,0 +1,95 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styles from './Computer.css';
+
+class Computer extends Component {
+    constructor(props){
+        super(props);
+        this.state={
+            size:8
+        }
+
+    }
+    componentDidMount(){
+        var size = this.state.size,len = size * size,sizeGird = 50,row = 0,col = 0,min = 0,max = size - 1, arr = [], bgArr = [],arr=[];
+        var oUl = document.getElementById('ul1');
+        var aLi = oUl.getElementsByTagName('li');
+        for(var i=0;i<len;i++){
+            //aLi[ row * size + col ].innerHTML = i;
+            arr.push( aLi[ row * size + col ] );
+            if( row == min && col < max ){
+                col = col + 1;
+            }
+            else if( col == max && row < max ){
+                row = row + 1;
+            }
+            else if( row == max && col > min ){
+                col = col - 1;
+            }
+            else if( col == min && row > min ){
+                row = row - 1;
+            }
+            if( row - 1 == min && col == min ){
+                min = min + 1;
+                max = max - 1;
+            }
+        }
+        for(var i=0;i<aLi.length;i++){
+            if(i%5==0){
+                var bgImage = 'url(./img/'+ ( Math.floor(Math.random()*11+1) ) +'.jpg)';
+                arr[i].style.backgroundImage = bgImage;
+                bgArr.push([i,bgImage]);
+            }
+        }
+
+        run();
+        setInterval(run,1000);
+
+        function run(){
+
+            for(var i=0;i<aLi.length;i++){
+                aLi[i].style.backgroundImage = '';
+                aLi[i].className = '';
+            }
+
+            for(var i=0;i<bgArr.length;i++){
+
+                bgArr[i][0] = bgArr[i][0] + 1;
+
+                if(arr[ bgArr[i][0] ]){
+                    arr[ bgArr[i][0] ].style.backgroundImage = bgArr[i][1];
+                    arr[ bgArr[i][0] ].className = 'active';
+                    arr[ bgArr[i][0] ].style.animationDelay = -Math.random()*2 + 's';
+                    arr[ bgArr[i][0] ].style.webkitAnimationDelay = -Math.random()*2 + 's';
+                }
+                else{
+                    bgArr.pop();
+                    var bgImage = 'url(./img/'+ ( Math.floor(Math.random()*11+1) ) +'.jpg)';
+                    bgArr.unshift([0,bgImage]);
+                }
+
+            }
+
+        }
+    }
+
+    render() {
+        var size = this.state.size,len = size * size,sizeGird = 50,row = 0,col = 0,min = 0,max = size - 1, arr = [], bgArr = [],arr=[];
+        for(let i=0;i<len;i++){
+            arr.push(i)
+        }
+        return (
+            <ul id='ul1' style={{width: size * (sizeGird + 1) + 'px'}}>
+                {
+                    arr.map((val,i)=>{
+                        return <li style={{width:sizeGird+'px',height:sizeGird+'px'}} key={i}></li>
+                    })
+                }
+            </ul>
+        );
+    }
+}
+
+
+
+export default Computer;

src/components/Pagination.css

@@ -0,0 +1,26 @@
+ul,li{ padding:0;margin:0;list-style:none}
+.pagination{
+    float: left;
+}
+.paginationLi{
+    border: 1px solid #cccccc;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    display: inline-block !important;
+    text-align: center;
+    color: #666666;
+    cursor:pointer ;
+}
+.paginationLi.active{
+    border: 1px solid #2f45b0;
+    color: #2f45b0;
+}
+.clearfix{
+    *zoom:1;
+}
+.clearfix:after{
+    content: "";
+    display: block;
+    clear: both;
+}

src/components/Pagination.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styles from './Pagination.css';
+
+class Pagination extends Component {
+    render() {
+        const {page,size,total,onChange}=this.props;
+        let arr=[],pageNum=total%size?Math.floor(total/size)+1:total/size;
+        for(let i=0;i<pageNum;i++){
+            arr.push(i)
+        }
+        if(pageNum<=1){
+            return ''
+        }
+        return (
+            <ul className='pagination clearfix'>
+                {
+                    arr.map((val,i)=>{
+                        return(
+                            <li onClick={()=>onChange(i,size)} key={i} className={page==i?'paginationLi active':'paginationLi'}>{i+1}</li>
+                        )
+                    })
+                }
+            </ul>
+        );
+    }
+}
+
+Pagination.propTypes = {
+    page: PropTypes.number||0,
+    size:PropTypes.number||1,
+    position: PropTypes.string||'bottom',
+};
+
+export default Pagination;

src/components/PlayerList.js

@@ -2,12 +2,31 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styles from './PlayerList.css';
 import PlayerListItem from './PlayerListItem';
+import {Pagination} from "./index";
 
 class PlayerList extends Component {
+    constructor(props) {
+        super(props);
+        // 设置 initial state
+        this.state = {
+            start:0,
+            end:(this.props.pagination.size||0),
+            page:this.props.pagination.page||0
+        };
+    }
+    onChange=(page,size)=>{
+        this.setState({
+            start:page*size,
+            end:(page+1)*size,
+            page:page,
+        })
+    };
   render() {
+    const {pagination,players}=this.props,{start,end,page}=this.state;
+    let playersArr=players.slice(start,end);
     return (
       <ul className={styles.playerList}>
-        {this.props.players.map((player, index) => {
+        {playersArr.map((player, index) => {
           return (
             <PlayerListItem
               key={index}
@@ -20,6 +39,12 @@ class PlayerList extends Component {
             />
           );
         })}
+          <Pagination
+              page={page}
+              size={pagination.size||5}
+              total={pagination.total||0}
+              onChange={this.onChange.bind(this)}
+          />
       </ul>
     );
   }

src/components/index.js

@@ -1,3 +1,5 @@
 export { default as AddPlayerInput } from './AddPlayerInput';
 export { default as PlayerList } from './PlayerList';
 export { default as PlayerListItem } from './PlayerListItem';
+export { default as Pagination } from './Pagination';
+export { default as Computer } from './Computer';

src/containers/PlayerListApp.js

@@ -3,7 +3,7 @@ import styles from './PlayerListApp.css';
 import { connect } from 'react-redux';
 
 import { addPlayer, deletePlayer, starPlayer } from '../actions/PlayersActions';
-import { PlayerList, AddPlayerInput } from '../components';
+import { PlayerList, AddPlayerInput ,Pagination,Computer} from '../components';
 
 class PlayerListApp extends Component {
   render() {
@@ -21,7 +21,8 @@ class PlayerListApp extends Component {
       <div className={styles.playerListApp}>
         <h1>NBA Players</h1>
         <AddPlayerInput addPlayer={actions.addPlayer} />
-        <PlayerList players={playersById} actions={actions} />
+        <PlayerList players={playersById} actions={actions} pagination={{total:playersById.length,page:0,size:5}}/>
+          <Computer/>
       </div>
     );
   }