-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathzdemo1.html
70 lines (62 loc) · 2.05 KB
/
zdemo1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" type="text/css">
<style>
.div {
height: 100px;
}
</style>
<script src="http://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<script src="./build/react.js"></script>
<script src="./build/react-dom.js"></script>
<script src="./build/browser.min.js"></script>
</head>
<body>
<h1><span class="label label-info">DEMO 4</span></h1>
<br><br><br>
<div class="well div" id="well">
</div>
<script type="text/babel">
var Text = React.createClass({
getInitialState: function() {
return {cur_time: 0};
},
request: function() {
$.ajax({
type: "GET",
url: "http://xxx",
success: function(data){
this.setState({cur_time: data.timestamp});
}.bind(this),
complete: function(){
this.setState({cur_time: Date.parse(new Date()) / 1000});
}.bind(this)
});
},
componentDidMount: function(){
setInterval(this.request, 1000);
},
render: function() {
return (
<div className="col-xs-12">
当前时间{this.state.cur_time}
<div className={ this.state.cur_time % 2 == 0?"hidden": "col-xs-6 alert alert-success"}>
<span>最后一位奇数</span>
</div>
<div className={ this.state.cur_time % 2 != 0?"hidden": "col-xs-6 alert alert-danger"}>
<span>最后一位偶数</span>
</div>
</div>
);
}
});
ReactDOM.render(
<Text />,
document.getElementById('will')
);
</script>
</body>
</html>