Skip to content

Commit 7c604ae

Browse files
stevenjoezhangstevenjoezhang
committed
Drop jQuery in demo
1 parent e7c52d1 commit 7c604ae

File tree

2 files changed

+23
-20
lines changed

2 files changed

+23
-20
lines changed

‎demo/demo1.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Live2D 看板娘 / Demo</title>
6-
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
76
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
87
<style>
98
#github svg {

‎demo/demo2.html‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
<title>看板娘登陆平台</title>
77
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
88
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
9-
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
109
<script src="../live2d.min.js"></script>
1110
<style>
1211
html, body {
@@ -151,15 +150,15 @@ <h1 class="h3 mb-3 font-weight-normal">看板娘登陆平台</h1>
151150
<p class="mt-5 mb-3 text-muted">Copyleft &copy; Mimi 2019</p>
152151
</form>
153152
<script>
154-
$(function() {
153+
window.addEventListener("load", () => {
155154
"use strict";
156155

157156
if (!CSS.supports("clip-path", "circle(120px at center)") && !CSS.supports("-webkit-clip-path", "circle(120px at center)")) {
158-
$("#stage").html('<img src="../assets/screenshot-1.png">');
157+
document.getElementById("stage").innerHTML = '<img src="../assets/screenshot-1.png">';
159158
return;
160159
}
161160

162-
var apiURL = "https://live2d.fghrsh.net/api", state = 0,
161+
var apiPath = "https://live2d.fghrsh.net/api", state = 0,
163162
modelId = localStorage.getItem("modelId"),
164163
modelTexturesId = localStorage.getItem("modelTexturesId");
165164
if (modelId == null) {
@@ -172,10 +171,10 @@ <h1 class="h3 mb-3 font-weight-normal">看板娘登陆平台</h1>
172171
localStorage.setItem("modelId", modelId);
173172
if (modelTexturesId === undefined) modelTexturesId = 0;
174173
localStorage.setItem("modelTexturesId", modelTexturesId);
175-
loadlive2d("live2d", `${apiURL}/get/?id=${modelId}-${modelTexturesId}`, null);
174+
loadlive2d("live2d", `${apiPath}/get/?id=${modelId}-${modelTexturesId}`, null);
176175
console.log("live2d", `模型 ${modelId}-${modelTexturesId} 加载完成`);
177-
setTimeout(function() {
178-
$("#cover").css("bottom", "80%");
176+
setTimeout(() => {
177+
coverPosition("80%");
179178
state = 2;
180179
}, 2000);
181180
}
@@ -187,10 +186,10 @@ <h1 class="h3 mb-3 font-weight-normal">看板娘登陆平台</h1>
187186
.then(response => response.json())
188187
.then(result => {
189188
loadModel(modelId, result.textures.id);
190-
setTimeout(function() {
189+
setTimeout(() => {
191190
state = 2;
192-
$("#cover").css("bottom", "80%");
193-
$("#refresh").attr("href", "javascript:refresh()");
191+
coverPosition("80%");
192+
document.getElementById("refresh").setAttribute("href", "javascript:refresh()");
194193
}, 1000);
195194
});
196195
}
@@ -204,6 +203,10 @@ <h1 class="h3 mb-3 font-weight-normal">看板娘登陆平台</h1>
204203
});
205204
}
206205

206+
function coverPosition(pos) {
207+
document.getElementById("cover").style.bottom = pos;
208+
}
209+
207210
window.info = function() {
208211
fetch("https://v1.hitokoto.cn")
209212
.then(response => response.json())
@@ -214,31 +217,32 @@ <h1 class="h3 mb-3 font-weight-normal">看板娘登陆平台</h1>
214217

215218
window.refresh = function() {
216219
state = 0;
217-
$("#cover").css("bottom", "10%");
218-
$("#refresh").attr("href", "javascript:void(0)");
220+
coverPosition("10%");
221+
document.getElementById("refresh").setAttribute("href", "javascript:void(0)");
219222
setTimeout(loadRandModel, 1000);
220223
}
221224

222-
$("#handle").click(function() {
225+
document.getElementById("handle").addEventListener("click", () => {
223226
if (state == 1) {
224227
state = 2;
225-
$("#cover").css("bottom", "80%");
228+
coverPosition("80%");
226229
}
227230
else if (state == 2) {
228231
state = 1;
229-
$("#cover").css("bottom", "20%");
232+
coverPosition("20%");
230233
}
231234
});
232235

233-
$("input[type=password]").focus(function() {
236+
document.querySelector("input[type=password]").addEventListener("focus", () => {
234237
if (state == 2) {
235238
state = 1;
236-
$("#cover").css("bottom", "20%");
239+
coverPosition("20%");
237240
}
238-
}).blur(function() {
241+
});
242+
document.querySelector("input[type=password]").addEventListener("blur", () => {
239243
if (state == 1) {
240244
state = 2;
241-
$("#cover").css("bottom", "80%");
245+
coverPosition("80%");
242246
}
243247
});
244248
});

0 commit comments

Comments
 (0)