knjcode · March 3, 2021 13:15
diff --git a/react-stopwatch-sample.html b/react-stopwatch-sample.html
 <html>
  <head>
    <title>React StopWatch sample</title>
    <meta name="viewport" content="width=device-width">
    <script src="http://fb.me/react-0.13.1.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
  </head>
  <body>
  <script type="text/jsx">
    var StopWatch = React.createClass({
      getInitialState: function() {
        return {
          isStart: false,
          elapsed: 0,
          diff: 0,
          laps: [],
        };
      },
      componentWillUnmount: function() { // clear timer
        clearInterval(this.state.timer);
        this.setState({timer: undefined});
      },
      tick: function() {
        var elapsed = Date.now() - this.state.start + this.state.diff;
        this.setState({elapsed: elapsed});
      },
      getTimeSpan: function(elapsed) { // 754567(ms) -> "12:34.567"
        var m = String(Math.floor(elapsed/1000/60)+100).substring(1);
        var s = String(Math.floor((elapsed%(1000*60))/1000)+100).substring(1);
        var ms = String(elapsed % 1000 + 1000).substring(1);
        return m+":"+s+"."+ms;
      },
      onClick: function() {
        if(!this.state.isStart) { // start
          var timer = setInterval(this.tick, 33);
          this.setState({
            isStart: true,
            timer: timer,
            start: new Date(),
          });
        } else { // pause
          clearInterval(this.state.timer);
          this.setState({
            timer: undefined,
            isStart: false,
            diff: this.state.elapsed,
          });
        }
      },
      setLap: function() {
        var lapElapsed = this.state.laps.length ? this.state.laps[0].elapsed : 0;
        var lapTitle = "Lap"+(this.state.laps.length+1);
        var lapTime = lapTitle+": "+this.getTimeSpan(this.state.elapsed - lapElapsed)
        var lapElem = { label: lapTime, elapsed: this.state.elapsed };
        this.setState({laps: [lapElem].concat(this.state.laps)});
      },
      reset: function() {
        clearInterval(this.state.timer);
        this.setState({
          timer: undefined,
          isStart: false,
          elapsed: 0,
          diff: 0,
          laps: [],
        });
      },
      render: function() {
        return (
          <div>
            <h1>{this.getTimeSpan(this.state.elapsed)}</h1>
            <button onClick={this.onClick} style={style.button}>
              {this.state.isStart ? "pause" : "start"}
            </button>
            <button onClick={this.setLap} style={style.button}>lap</button>
            <button onClick={this.reset} style={style.button}>reset</button>
            <ul style={style.lap}>
              {this.state.laps.map(function(lap) {
                return <li key={lap.id}>{lap.label}</li>;
              })}
            </ul>
          </div>
        );
      }
    });

    var style = {
      button: {
        fontSize: 20,
        height: 44,
        width: 88,
        margin: 5,
      },
      lap: {
        fontSize: 28,
        padding: 5,
        listStyleType: 'none',
      }
    };

    React.render( <StopWatch />, document.body );
  </script>
  </body>
 </html>
	<html>
	<head>
	<title>React StopWatch sample</title>
	<meta name="viewport" content="width=device-width">
	<script src="http://fb.me/react-0.13.1.js"></script>
	<script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
	</head>
	<body>
	<script type="text/jsx">
	var StopWatch = React.createClass({
	getInitialState: function() {
	return {
	isStart: false,
	elapsed: 0,
	diff: 0,
	laps: [],
	};
	},
	componentWillUnmount: function() { // clear timer
	clearInterval(this.state.timer);
	this.setState({timer: undefined});
	},
	tick: function() {
	var elapsed = Date.now() - this.state.start + this.state.diff;
	this.setState({elapsed: elapsed});
	},
	getTimeSpan: function(elapsed) { // 754567(ms) -> "12:34.567"
	var m = String(Math.floor(elapsed/1000/60)+100).substring(1);
	var s = String(Math.floor((elapsed%(1000*60))/1000)+100).substring(1);
	var ms = String(elapsed % 1000 + 1000).substring(1);
	return m+":"+s+"."+ms;
	},
	onClick: function() {
	if(!this.state.isStart) { // start
	var timer = setInterval(this.tick, 33);
	this.setState({
	isStart: true,
	timer: timer,
	start: new Date(),
	});
	} else { // pause
	clearInterval(this.state.timer);
	this.setState({
	timer: undefined,
	isStart: false,
	diff: this.state.elapsed,
	});
	}
	},
	setLap: function() {
	var lapElapsed = this.state.laps.length ? this.state.laps[0].elapsed : 0;
	var lapTitle = "Lap"+(this.state.laps.length+1);
	var lapTime = lapTitle+": "+this.getTimeSpan(this.state.elapsed - lapElapsed)
	var lapElem = { label: lapTime, elapsed: this.state.elapsed };
	this.setState({laps: [lapElem].concat(this.state.laps)});
	},
	reset: function() {
	clearInterval(this.state.timer);
	this.setState({
	timer: undefined,
	isStart: false,
	elapsed: 0,
	diff: 0,
	laps: [],
	});
	},
	render: function() {
	return (
	<div>
	<h1>{this.getTimeSpan(this.state.elapsed)}</h1>
	<button onClick={this.onClick} style={style.button}>
	{this.state.isStart ? "pause" : "start"}
	</button>
	<button onClick={this.setLap} style={style.button}>lap</button>
	<button onClick={this.reset} style={style.button}>reset</button>
	<ul style={style.lap}>
	{this.state.laps.map(function(lap) {
	return <li key={lap.id}>{lap.label}</li>;
	})}
	</ul>
	</div>
	);
	}
	});

	var style = {
	button: {
	fontSize: 20,
	height: 44,
	width: 88,
	margin: 5,
	},
	lap: {
	fontSize: 28,
	padding: 5,
	listStyleType: 'none',
	}
	};

	React.render( <StopWatch />, document.body );
	</script>
	</body>
	</html>