1 | <!DOCTYPE html>
|
2 | <html>
|
3 | <head>
|
4 | <meta charset="utf-8" />
|
5 | <title>react-countdown-clock</title>
|
6 | <style>
|
7 | body {
|
8 | background-color: #CCC;
|
9 | }
|
10 | #parappa {
|
11 | position: absolute;
|
12 | top: 50%;
|
13 | left: 50%;
|
14 | width: 300px;
|
15 | height: 300px;
|
16 | margin: -150px 0 0 -150px;
|
17 | }
|
18 | </style>
|
19 | </head>
|
20 | <body>
|
21 | <div id="parappa"></div>
|
22 | <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
|
23 | <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
|
24 | <script src="./build/react-countdown-clock.js"></script>
|
25 | <script>
|
26 | var MAX = 30;
|
27 | var MIN = 5;
|
28 |
|
29 | var randomAmountOfSeconds = function(){
|
30 | return Math.floor( Math.random() * ( MAX - MIN + 1) + MIN )
|
31 | }
|
32 |
|
33 | var randomColor = function(){
|
34 | return '#' + ( Math.random() * 0xFFFFFF << 0 ).toString(16);
|
35 | }
|
36 |
|
37 | var Demo = React.createClass({
|
38 | displayName: 'Demo',
|
39 | getState: function(){
|
40 | return {
|
41 | seconds: randomAmountOfSeconds(),
|
42 | color: randomColor()
|
43 | }
|
44 | },
|
45 | getInitialState: function(){
|
46 | return this.getState();
|
47 | },
|
48 | handleOnComplete: function(){
|
49 | this.setState(this.getState());
|
50 | },
|
51 | render: function(){
|
52 | return (
|
53 | React.createElement(ReactCountdownClock, {
|
54 | seconds: this.state.seconds,
|
55 | color: this.state.color,
|
56 | alpha: 0.9,
|
57 | onComplete: this.handleOnComplete
|
58 | })
|
59 | )
|
60 | }
|
61 | });
|
62 |
|
63 | ReactDOM.render(
|
64 | React.createElement(Demo, null),
|
65 | document.getElementById('parappa')
|
66 | )
|
67 | </script>
|
68 | </body>
|
69 | </html>
|