home.js
8.46 KB
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
var baseURL = 'http://dsc-b.vchangyi.com/party/phpapi';
let showData = [];
let action ={
// 初始化，参数：文字展示次数
init: (fontRunTime, showModel)=>{
// 页面激活，重新加载页面
document.addEventListener('visibilitychange', function() {
var isHidden = document.hidden;
if (!isHidden) {
location.reload();
}
});
if (showModel == 1) {
baseRquest.get('/apicp.GetUserList.php', {}, data =>{
console.log(data);
if (data.length == 0) {
alert('暂无用户');
return;
}
// 绑定数据到页面
let dataLength = data.length;
let i = 0;
while (showData.length <144) {
showData.push(data[i]);
i++;
if (i == dataLength) {
i = 0;
}
}
showData.sort(function(a, b) {
return Math.random()>.5 ? -1 : 1;
});
console.log(showData);
dataListBind('users-bind', 'user-item', showData);
action.fontRunTime = fontRunTime;
// showtime
action.fontChange();
});
} else {
let allUser = [];
Object.keys(userData).forEach(function(key){
allUser.push(userData[key]);
})
let dataLength = allUser.length;
let i = 0;
while (showData.length <144) {
showData.push(allUser[i]);
i++;
if (i == dataLength) {
i = 0;
}
}
showData.sort(function(a, b) {
return Math.random()>.5 ? -1 : 1;
});
console.log(showData);
dataListBind('users-bind', 'user-item', showData);
action.fontRunTime = fontRunTime;
// showtime
action.fontChange();
}
},
fontRunTime: 0,
// 第一段动画，动态文字拼接
fontChange: ()=>{
console.log(new Date());
let count = $('#users .img-opacity').length;
let fontKey = [
[36,37,38,39,51,67,83,100,101,102,103,42,46,59,61,76,92,108],
[19,20,21,22,23,35,51,67,68,69,70,71,87,103,119,118,117,116,115,74,89,90,91,106,122,123,61,77,93,109,125,94,95,111,127]
];
let change = function(i, fontIndex){
// console.log(fontIndex);
let hideTimeOut = setTimeout(() => {
if (fontIndex.indexOf(i) < 0) {
$('#users .img-opacity').eq(i).css('background-color','#000').fadeIn();
} else {
$('#users .img-opacity').eq(i).css('background-color','rgb(40,117,232)').fadeIn();
}
clearTimeout(hideTimeOut);
}, 500);
}
let j = 0;
let fontRunTime = action.fontRunTime;
let show = ()=>{
let i = 0;
let fontIndex = fontKey[j];
let intervalUse = setInterval(() => {
$('#users .img-opacity').eq(i).fadeOut(200 , change(i,fontIndex));
i++;
if (count == i) {
clearInterval(intervalUse);
}
}, 10);
j++;
if (fontKey.length == j) {
j = 0;
fontRunTime--;
}
if (fontRunTime == 0) {
clearInterval(interval);
fontRunTime = action.fontRunTime;
action.showLogo();
}
return show;
}
let interval = setInterval(show(), 20000);
},
// 第二段动画，展示logo
showLogo: ()=>{
// 20s后开始
let interval = setInterval(()=>{
let i = 0;
let count = $('#users .img-opacity').length;
// 展示需要65s
let intervalUse = setInterval(() => {
$('#users .img-opacity').eq(i).fadeOut(300);
i++;
if (count == i) {
clearInterval(intervalUse);
}
}, 500);
// logo展示延迟135秒
let intervalLogo = setInterval(() => {
$('#users .img-opacity').css('background-color','#000').fadeIn(2000);
$('.logo').fadeIn(2000);
clearInterval(intervalLogo);
action.reset();
},74000);
clearInterval(interval);
}, 20000);
},
// 重置动画
reset: ()=>{
let interval = setTimeout(()=>{
location.reload();
},60000);
}
}
// 山寨dom数据列表绑定控件，没有实现事件callback
// 要求设置容器名称z-for-container，设置循环列数据模板z-for-item
// 参数1：容器名称，存放列表数据的容器 2：设置的数据模板 3：json数据
let dataListBind = (container, itemName, data)=>{
let trs = '';
// 获取模板
$('*[z-for-item="'+ itemName +'"]').show();
let trTemplate = $('*[z-for-item="'+ itemName +'"]').prop("outerHTML");
$('*[z-for-item="'+ itemName +'"]').hide();
let trTemplateHide = $('*[z-for-item="'+ itemName +'"]').prop("outerHTML");
for(let i = 0; data.length > i; i++) {
// 创建一行dom
let tr = trTemplate;
// 模板需要赋值项
let forDataItem = $(tr).find("*[z-for-data]");
for(let j = 0; forDataItem.length > j; j++) {
let item = $(forDataItem).eq(j).prop("outerHTML");
// 获取dom标签绑定的映射名称
let column = $(forDataItem).eq(j).attr("z-for-data");
let tagName = $(forDataItem)[j].tagName.toLowerCase();
// 列表中的img和input支持直接赋值，其他标签赋值到标签中间
if (tagName == 'img') {
$(forDataItem).eq(j).attr('src', data[i][column]);
} else if (tagName == 'input') {
$(forDataItem).eq(j).val(data[i][column]);
} else {
$(forDataItem).eq(j).html(data[i][column]);
}
tr = tr.replace(item,$(forDataItem).eq(j).prop("outerHTML"));
}
trs += $(tr).removeAttr('z-for-item').prop("outerHTML");
}
$('*[z-for-container="'+ container +'"]').html(trTemplateHide + trs);
}
// api接口数据请求，数据交互引用的axios
let baseRquest = {
// get请求
get: function(url, params, callback) {
let token = localStorage["token"];
axios.defaults.baseURL = baseURL;
axios.get(url, {
params : params,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
token: token
}
}).then(function (response) {
if (response.status == 200)
{
data = response.data;
if (!!data) {
// 过滤错误信息，统一抛出
if (data.errcode != 0 && data.errcode != 200) {
alert(data.errmsg);
} else {
callback(data.result);
}
}
}else {
alert('get无法访问接口');
}
})
.catch(function (error) {
});
},
// post请求
post: function(url, params, callback) {
let token = localStorage["token"];
axios.defaults.baseURL = baseURL;
let data = new URLSearchParams();
Object.keys(params).forEach(function(key){
data.append(key, params[key]);
});
axios.post(url, data,{
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
token: token
}
}).then(function (response) {
if (response.status == 200)
{
data = response.data;
if (!!data) {
// 过滤错误信息，统一抛出
if (data.errcode != 0 && data.errcode != 200) {
alert(data.errmsg);
} else {
callback(data.result);
}
}
}else {
alert('post无法访问接口');
}
})
.catch(function (error) {
console.log(error);
});
}
}