Skip to content

Commit d789478

Browse files
zhouxiaotianzhouxiaotian
committed
init
1 parent 43f8f55 commit d789478

21 files changed

Lines changed: 1209 additions & 0 deletions

‎第八期正式课课件/第七周/第四天-分页/API接口文档.txt‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
1、根据客户端传递的页数获取对应的10条记录
2+
URL:/getList GET
3+
参数:?n=1
4+
返回:
5+
'
6+
{
7+
total:10, //->总页数
8+
data:[ //->存放需要展示的数据(对应第N页的10条数据)
9+
{
10+
id:1,
11+
name:'',
12+
sex:0, //->0男 1女
13+
score:96
14+
},
15+
...
16+
]
17+
}
18+
'
19+
20+
2、根据传递进来的学生的ID获取学员的详细信息
21+
URL:/getInfo GET
22+
参数:?id=1
23+
返回:
24+
'{
25+
id:1,
26+
name:'',
27+
sex:0,
28+
score:96
29+
}'
30+
31+
32+
33+
n=1 [0~9]
34+
n=2 [10~19]
35+
n=3 [20~29]
36+
n [(n-1)*10 ~ n*10-1]
37+
n=10 [90~99] MAX INDEX=97
38+
39+
40+
41+

‎第八期正式课课件/第七周/第四天-分页/css/index.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
ul, li {
7+
list-style: none;
8+
}
9+
10+
input {
11+
outline: none;
12+
}
13+
14+
html, body {
15+
width: 100%;
16+
color: #000;
17+
font-size: 14px;
18+
font-family: Helvetica, Arial, sans-serif;
19+
overflow-x: hidden;
20+
-webkit-user-select: none;
21+
}
22+
23+
.box {
24+
margin: 10px auto;
25+
padding: 10px;
26+
width: 800px;
27+
border: 2px solid green;
28+
}
29+
30+
.header {
31+
height: 35px;
32+
line-height: 35px;
33+
text-align: center;
34+
color: #FFF;
35+
font-size: 18px;
36+
background: green;
37+
}
38+
39+
.header span, .content li span {
40+
float: left;
41+
width: 200px;
42+
}
43+
44+
.content {
45+
height: 300px;
46+
}
47+
48+
.content li {
49+
height: 30px;
50+
line-height: 30px;
51+
text-align: center;
52+
cursor: pointer;
53+
}
54+
55+
.content li:nth-child(even) {
56+
background: #EEE;
57+
}
58+
59+
.content li:hover {
60+
background: lightblue;
61+
}
62+
63+
.footer {
64+
margin-top: 10px;
65+
height: 22px;
66+
text-align: center;
67+
overflow: hidden;
68+
}
69+
70+
.footer span, .footer ul, .footer ul li, .footer input {
71+
display: inline-block;
72+
}
73+
74+
.footer span, .footer ul li, .footer input {
75+
margin: 0 3px;
76+
width: 45px;
77+
height: 20px;
78+
line-height: 20px;
79+
text-align: center;
80+
border: 1px solid green;
81+
font-size: 12px;
82+
cursor: pointer;
83+
}
84+
85+
.footer ul li {
86+
width: 20px;
87+
}
88+
89+
.footer ul li.bg {
90+
color: #FFF;
91+
background: green;
92+
}

‎第八期正式课课件/第七周/第四天-分页/detail.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
9+
</body>
10+
</html>

‎第八期正式课课件/第七周/第四天-分页/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>珠峰培训</title>
6+
<link type="text/css" rel="stylesheet" href="css/index.css"/>
7+
</head>
8+
<body>
9+
<div class="box" id="box">
10+
<h2 class="header">
11+
<span>编号</span>
12+
<span>姓名</span>
13+
<span>性别</span>
14+
<span>分数</span>
15+
</h2>
16+
<ul class="content" id="content">
17+
<!--<li data-id=1>
18+
<span>1</span>
19+
<span>xxx</span>
20+
<span>男</span>
21+
<span>98</span>
22+
</li>-->
23+
</ul>
24+
<div class="footer" id="footer">
25+
<span>FIRST</span>
26+
<span>PREV</span>
27+
<ul id="numBox">
28+
<!--<li class="bg">1</li>
29+
<li>2</li>
30+
<li>3</li>
31+
<li>4</li>
32+
<li>5</li>-->
33+
</ul>
34+
<span>NEXT</span>
35+
<span>LAST</span>
36+
<input type="text" class="pageNum" id="pageNum"/>
37+
</div>
38+
</div>
39+
40+
<script type="text/javascript" src="js/ajax.js"></script>
41+
<script type="text/javascript" src="js/index.js"></script>
42+
</body>
43+
</html>

‎第八期正式课课件/第七周/第四天-分页/js/ajax.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
function ajax(options) {
2+
//->init parameters
3+
var _default = {
4+
url: null,
5+
type: 'GET',
6+
dataType: 'JSON',
7+
async: true,
8+
cache: true,
9+
data: null,
10+
success: null
11+
};
12+
for (var key in options) {
13+
if (options.hasOwnProperty(key)) {
14+
_default[key] = options[key];
15+
}
16+
}
17+
18+
//->SEND AJAX
19+
var xhr = new XMLHttpRequest;
20+
if (_default.type.toUpperCase() === 'GET' && _default.cache === false) {
21+
_default.url.indexOf('?') > -1 ? _default.url += '&' : _default.url += '?';
22+
_default.url += "_=" + Math.random();
23+
}
24+
xhr.open(_default.type, _default.url, _default.async);
25+
xhr.onreadystatechange = function () {
26+
if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
27+
var dataType = _default.dataType.toUpperCase(),
28+
value = xhr.responseText;
29+
switch (dataType) {
30+
case 'JSON':
31+
value = 'JSON' in window ? JSON.parse(value) : eval('(' + value + ')');
32+
break;
33+
case 'TXT':
34+
break;
35+
case 'XML':
36+
value = xhr.responseXML;
37+
break;
38+
}
39+
_default.success && _default.success.call(xhr, value);
40+
}
41+
};
42+
xhr.send(_default.data);
43+
}

‎第八期正式课课件/第七周/第四天-分页/js/index.js‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
var pageRender = (function () {
2+
var n = 1,
3+
total = 0;
4+
var oBox = document.getElementById('box'),
5+
content = document.getElementById('content'),
6+
footer = document.getElementById('footer'),
7+
numBox = document.getElementById('numBox'),
8+
pageNum = document.getElementById('pageNum');
9+
10+
//->SEND AJAX AND BIND HTML
11+
function bindHTML() {
12+
//->SUCCESS AND BIND HTML
13+
function callback(result) {
14+
if (!result) return;
15+
total = parseInt(result['total']);
16+
17+
//->GET DATA CONCAT STR
18+
var data = result['data'],
19+
str = '';
20+
for (var i = 0, len = data.length; i < len; i++) {
21+
var cur = data[i];
22+
str += '<li data-id="' + cur['id'] + '">';
23+
str += '<span>' + cur['id'] + '</span>';
24+
str += '<span>' + cur['name'] + '</span>';
25+
str += '<span>' + (cur['sex'] == 1 ? '女' : '男') + '</span>';
26+
str += '<span>' + cur['score'] + '</span>';
27+
str += '</li>';
28+
}
29+
content.innerHTML = str;
30+
31+
//->CONCAT PAGE
32+
str = '';
33+
for (i = 1; i <= total; i++) {
34+
if (i == n) {
35+
str += '<li class="bg">' + i + '</li>';
36+
continue;
37+
}
38+
str += '<li>' + i + '</li>';
39+
}
40+
numBox.innerHTML = str;
41+
42+
//->PAGE NUM SHOW N
43+
pageNum.value = n;
44+
}
45+
46+
//->SEND AJAX GET DATA
47+
ajax({
48+
url: '/getList?n=' + n,
49+
type: 'GET',
50+
dataType: "JSON",
51+
cache: false,
52+
success: callback
53+
});
54+
}
55+
56+
//->BIND EVENT
57+
function bindEvent() {
58+
oBox.onclick = function (ev) {
59+
ev = ev || window.event;
60+
var tar = ev.target || ev.srcElement,
61+
tarTag = tar.tagName.toUpperCase(),
62+
tarInn = tar.innerHTML,
63+
tarParent = tar.parentNode,
64+
tarGrandparent = tarParent.parentNode;
65+
66+
//->CONTENT LI OR SPAN
67+
if ((tarTag === 'LI' && tarParent.id === 'content') || (tarTag === 'SPAN' && tarGrandparent.id === 'content')) {
68+
if (tarTag === 'SPAN') {
69+
tar = tarParent;
70+
}
71+
var id = tar.getAttribute('data-id');
72+
//window.location.href = 'detail.html?id=' + id;
73+
window.open('detail.html?id=' + id);
74+
return;
75+
}
76+
77+
//->NUM BOX LI
78+
if (tarTag === 'LI' && tarParent.id === 'numBox') {
79+
tarInn = parseInt(tarInn);
80+
if (tarInn === n) {
81+
return;
82+
}
83+
n = tarInn;
84+
bindHTML();
85+
return;
86+
}
87+
88+
//->FOOTER SPAN
89+
if (tarTag === 'SPAN' && tarParent.id === 'footer') {
90+
if (tarInn === 'FIRST') {
91+
if (n === 1) {
92+
return;
93+
}
94+
n = 1;
95+
}
96+
if (tarInn === 'LAST') {
97+
if (n === total) {
98+
return;
99+
}
100+
n = total;
101+
}
102+
if (tarInn === 'PREV') {
103+
if (n === 1) {
104+
return;
105+
}
106+
n--;
107+
}
108+
if (tarInn === 'NEXT') {
109+
if (n === total) {
110+
return;
111+
}
112+
n++;
113+
}
114+
bindHTML();
115+
}
116+
117+
}
118+
}
119+
120+
return {
121+
init: function () {
122+
//->BIND HTML
123+
bindHTML();
124+
125+
//->BIND EVENT
126+
bindEvent();
127+
128+
//->INPUT KEY UP
129+
pageNum.onkeyup = function (ev) {
130+
ev = ev || window.event;
131+
//->ENTER
132+
if (ev.keyCode === 13) {
133+
var val = parseFloat(this.value);
134+
if (isNaN(val) || val === n) {
135+
this.value = n;
136+
return;
137+
}
138+
n = val < 1 ? 1 : (val > total ? total : val);
139+
bindHTML();
140+
}
141+
}
142+
}
143+
}
144+
})();
145+
pageRender.init();

0 commit comments

Comments
 (0)