-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
307 lines (272 loc) · 9.03 KB
/
index.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
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
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.wl-reaction {
overflow: auto hidden;
margin-bottom: 1.75em;
text-align: center;
}
[data-waline] * {
box-sizing: content-box;
line-height: 1.75;
}
.wl-reaction-title {
margin: 25px auto;
font-weight: bold;
font-size: 25px;
}
[data-waline] .wl-reaction-list {
margin-inline-start: 0;
}
[data-waline] ol,
[data-waline] ul {
margin-inline-start: 1.25em;
padding: 0;
}
.wl-reaction-list {
display: flex;
flex-direction: row;
gap: 30px;
justify-content: center;
margin: 0;
padding: 8px;
list-style-type: none;
}
.wl-reaction-item {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
}
.wl-reaction-img {
position: relative;
width: 60px;
height: 60px;
}
.wl-reaction-text {
font-size: .875em;
}
.wl-reaction img {
width: 100%;
height: 100%;
transition: all 250ms ease-in-out;
}
[data-waline] img {
max-width: 100%;
max-height: 400px;
border: none;
}
.wl-reaction-votes {
position: absolute;
top: -9px;
inset-inline-end: -9px;
min-width: 1.5em;
padding: 2px;
border: 1px solid #54382fdd;
border-radius: 1em;
background: #fff;
color: #54382fdd;
font-weight: 700;
font-size: .75em;
line-height: 1;
}
.wl-reaction-item:hover img,
.wl-reaction-item.active img {
transform: scale(1.5);
}
.view_loading {
border: 2px solid #f3f3f3;
border-top: 2px solid #555;
border-radius: 50%;
width: 20px;
height: 20px;
display: inline-block;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.my-view {
border: 1px solid #54382fdd;
border-radius: 1em;
background: #54382fdd;
color: #fff;
}
</style>
<title>Hexo_view</title>
</head>
<body>
<div class="wl-reaction">
<div class="wl-reaction-title">就现在，表明你的态度！</div>
<ul class="wl-reaction-list">
<li class="wl-reaction-item">
<div class="wl-reaction-img"><img src="https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/鼓掌.png"
alt="鼓励">
<div class="wl-reaction-votes">0</div>
</div>
<div class="wl-reaction-text">鼓励</div>
</li>
<li class="wl-reaction-item">
<div class="wl-reaction-img"><img src="https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/菜狗.png"
alt="菜狗">
<div class="wl-reaction-votes">0</div>
</div>
<div class="wl-reaction-text">菜狗</div>
</li>
<li class="wl-reaction-item">
<div class="wl-reaction-img"><img src="https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/正确.png"
alt="正确">
<div class="wl-reaction-votes">0</div>
</div>
<div class="wl-reaction-text">正确</div>
</li>
<li class="wl-reaction-item">
<div class="wl-reaction-img"><img src="https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/错误.png"
alt="错误">
<div class="wl-reaction-votes">0</div>
</div>
<div class="wl-reaction-text">错误</div>
</li>
<li class="wl-reaction-item">
<div class="wl-reaction-img"><img src="https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/思考.png"
alt="思考">
<div class="wl-reaction-votes">0</div>
</div>
<div class="wl-reaction-text">思考</div>
</li>
<li class="wl-reaction-item">
<div class="wl-reaction-img"><img src="https://jsd.cdn.zzko.cn/npm/sticker-heo/Sticker-100/睡觉.png"
alt="无聊">
<div class="wl-reaction-votes">0</div>
</div>
<div class="wl-reaction-text">无聊</div>
</li>
</ul>
</div>
</body>
<script>
// 更新投票数的函数
function updateVotes(data) {
const liElements = document.querySelectorAll('.wl-reaction-item');
liElements.forEach((li, index) => {
const voteElement = li.querySelector('.wl-reaction-votes');
if (voteElement) {
// 先移除所有元素的 my-view 类名
voteElement.classList.remove('my-view');
const viewKey = 'view' + (index + 1);
if (data.hasOwnProperty(viewKey)) {
voteElement.textContent = data[viewKey];
}
if (data.hasOwnProperty('my_view') && Number(data.my_view) === (index + 1)) {
voteElement.classList.add('my-view');
}
}
});
}
// 发送 POST 请求的函数
function sendPostRequest(address, ip, view) {
// 构建请求参数对象
const data = {
address: address,
ip: ip,
view: view
};
// 添加 view_loading 类名
const clickedLi = document.querySelector('.wl-reaction-item.clicked');
const voteElement = clickedLi.querySelector('.wl-reaction-votes');
voteElement.classList.add('view_loading');
// 发起 POST 请求
fetch('https://hexo-view.pupper.cn/insert/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
// 更新投票数
updateVotes(data);
// 移除 view_loading 类名
voteElement.classList.remove('view_loading');
})
.catch(error => {
// 处理请求错误
console.error('Error:', error);
// 移除 view_loading 类名
voteElement.classList.remove('view_loading');
});
}
function sendGetRequest(address, ip) {
// 获取所有 wl-reaction-votes 元素
var voteElements = document.querySelectorAll('.wl-reaction-votes');
// 对每个元素添加 view_loading 类名
voteElements.forEach(element => {
element.classList.add('view_loading');
});
// 发起 GET 请求
fetch('https://hexo-view.pupper.cn/read/?address=' + encodeURIComponent(address) + '&ip=' + encodeURIComponent(ip))
.then(response => response.json())
.then(data => {
// 更新投票数
updateVotes(data);
})
.catch(error => {
// 处理请求错误
console.error('Error:', error);
})
.finally(() => {
// 不论成功或失败，请求结束后对每个元素移除 view_loading 类名
voteElements.forEach(element => {
element.classList.remove('view_loading');
});
});
}
// 获取当前页面地址
const address = window.location.href;
// 获取用户网络 IP 地址（示例，实际情况可能需要使用其他方法获取）
let ip = '';
function setIP() {
return fetch('https://api.ipify.org?format=json')
.then(response => response.json())
.then(data => {
ip = data.ip;
})
.catch(error => {
console.error('获取 IP 地址失败:', error);
ip = '127.4.0.4';
});
}
setIP().then(() => {
console.log(ip); // 输出获取的 IP 地址或默认地址
});
// 获取所有的 li 元素
const liElements = document.querySelectorAll('.wl-reaction-item');
// 绑定点击事件处理程序
liElements.forEach((li, index) => {
li.addEventListener('click', () => {
const view = 'view' + (index + 1);
console.log(address, ip, view);
// 移除之前点击的 li 元素的 clicked 类名
const clickedLi = document.querySelector('.wl-reaction-item.clicked');
if (clickedLi) {
clickedLi.classList.remove('clicked');
}
// 添加 clicked 类名到当前点击的 li 元素
li.classList.add('clicked');
sendPostRequest(address, ip, view);
});
});
// 页面加载或刷新时自动发送 GET 请求
window.addEventListener('DOMContentLoaded', () => {
sendGetRequest(address, ip);
});
</script>
</html>