Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save alecklandgraf/0327022cf8b65219cab737e09c94ea7b to your computer and use it in GitHub Desktop.
Save alecklandgraf/0327022cf8b65219cab737e09c94ea7b to your computer and use it in GitHub Desktop.
React stopwatch sample
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment