项目作者: 951565664

项目描述 :
a scoreboard width React https://951565664.github.io/Scoreboard/
高级语言: JavaScript
项目地址: git://github.com/951565664/Scoreboard.git
创建时间: 2018-06-05T01:21:16Z
项目社区:https://github.com/951565664/Scoreboard

开源协议:MIT License

下载


Scoreboard

a scoreboard width React

https://951565664.github.io/Scoreboard/

Install

  1. npm install scoreboard-react --save

or

  1. yarn install scoreboard-react --save

Usage

  1. import Scoreboard from 'scoreboard';

Props

Props desc type default
transitionDuration 动画的时间 String 0.5s
numberStyle 数字的样式 Object {}
style 外框的样式 Object {}

Demo

D:\codeSpace\Scoreboard\example\test

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import Scoreboard from 'scoreboard-react';
  4. import styles from './index.less'
  5. const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
  6. class App extends Component {
  7. state = {
  8. key: 2
  9. }
  10. changeNum = (params) => {
  11. this.setState({
  12. key: parseInt(Math.random() * 10) + 2
  13. })
  14. }
  15. componentDidMount = () => {
  16. this.timer = setInterval(this.changeNum, 1000)
  17. }
  18. componentWillMount = () => {
  19. clearInterval(this.timer)
  20. }
  21. render() {
  22. let numberStr = new Array(this.state.key).fill(1).map((item) => parseInt(Math.random() * 10)).reduce((prev, curr, index, array) => '' + prev + curr);
  23. return (
  24. <div className={styles["wrapper"]}>
  25. <div className={styles.forkMe} >
  26. <a href="https://github.com/951565664/Scoreboard" target="_">
  27. <img
  28. src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67"
  29. alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"
  30. />
  31. </a>
  32. </div>
  33. <div onClick={this.changeNum} style={{ width: '100%' }}>
  34. <Scoreboard numberStr={numberStr} transitionDuration={'1s'} numberStyle={{ color: '#c40000', fontSize: '20px' }} ></Scoreboard>
  35. </div>
  36. </div>
  37. );
  38. }
  39. }
  40. ReactDOM.render(<App ></App>, document.getElementById('root'));