增加载入进度提示
This commit is contained in:
parent
9479442eb8
commit
0e70b1a29e
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
After Width: | Height: | Size: 488 B |
Binary file not shown.
After Width: | Height: | Size: 46 KiB |
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>智龙迷城队伍图制作工具</title>
|
||||
<link rel="shortcut icon" href="icon.png" type="image/x-png" />
|
||||
<link rel="shortcut icon" href="images/icon.png" type="image/x-png" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="style-monsterimages.css" rel="stylesheet" type="text/css">
|
||||
|
|
|
@ -1,4 +1,7 @@
|
|||
@charset "utf-8";
|
||||
.status.loading-mon-info .text::before{
|
||||
content: "Please wait while the monster data is being loaded.";
|
||||
}
|
||||
.delay .monster::before{
|
||||
content: "Prevent\A Delay";
|
||||
font-size: 22px;
|
||||
|
|
|
@ -1,4 +1,7 @@
|
|||
@charset "utf-8";
|
||||
.status.loading-mon-info .text::before{
|
||||
content: "モンスターデータを読み込んでいます。";
|
||||
}
|
||||
.delay .monster::before{
|
||||
content: "遅 延\A対 策";
|
||||
}
|
||||
|
|
|
@ -1,4 +1,7 @@
|
|||
@charset "utf-8";
|
||||
.status.loading-mon-info .text::before{
|
||||
content: "몬스터 데이터를 로드 하 고 있습니다.";
|
||||
}
|
||||
.delay .monster::before{
|
||||
content: "지 연\A방 지";
|
||||
}
|
||||
|
|
|
@ -1,4 +1,7 @@
|
|||
@charset "utf-8";
|
||||
.status.loading-mon-info .text::before{
|
||||
content: "正在載入怪物數據,請稍候。";
|
||||
}
|
||||
.delay .monster::before{
|
||||
content: "應 對\A威 嚇";
|
||||
}
|
||||
|
|
|
@ -1,4 +1,7 @@
|
|||
@charset "utf-8";
|
||||
.status.loading-mon-info .text::before{
|
||||
content: "正在加载怪物数据,请稍候。";
|
||||
}
|
||||
.delay .monster::before{
|
||||
content: "应 对\A威 吓";
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>智龙迷城车队阵型图制作工具</title>
|
||||
<link rel="shortcut icon" href="icon.png" type="image/x-png" />
|
||||
<link rel="shortcut icon" href="images/icon.png" type="image/x-png" />
|
||||
<meta name="viewport" content="width=664" />
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="style-monsterimages.css" rel="stylesheet" type="text/css">
|
||||
|
@ -29,7 +29,7 @@ var formation = new Formation(2,5);
|
|||
<button class="btn-solo-link" onclick="swapSingleMulitple();"></button>
|
||||
<button class="btn-swap-AB-team" onclick="swapABteam();"></button>
|
||||
</div>
|
||||
<div class="information"></div>
|
||||
<div class="status"><span class="icon"></span><span class="text"></span></div>
|
||||
</div>
|
||||
<div class="formation-box">
|
||||
<div class="title-box"><input type="text" class="title" placeholder="输入队伍标题" /></div>
|
||||
|
|
15
script.js
15
script.js
|
@ -226,16 +226,17 @@ window.onload = function()
|
|||
{
|
||||
interchangeSVG = document.querySelector("#interchange-line");
|
||||
interchangePath = interchangeSVG.querySelector("g line");
|
||||
let controlBox = document.querySelector(".control-box");
|
||||
const controlBox = document.querySelector(".control-box");
|
||||
const statusLine = controlBox.querySelector(".status"); //显示当前状态的
|
||||
|
||||
//▼添加语言列表开始
|
||||
let langSelectDom = controlBox.querySelector(".languages");
|
||||
const langSelectDom = controlBox.querySelector(".languages");
|
||||
languageList.forEach(function(l){
|
||||
langSelectDom.options.add(new Option(l.name,l.i18n));
|
||||
});
|
||||
|
||||
let parameter_i18n = getQueryString("l") || getQueryString("lang"); //获取参数指定的语言
|
||||
let browser_i18n = (navigator.language || navigator.userLanguage); //获取浏览器语言
|
||||
const parameter_i18n = getQueryString("l") || getQueryString("lang"); //获取参数指定的语言
|
||||
const browser_i18n = (navigator.language || navigator.userLanguage); //获取浏览器语言
|
||||
let havingLanguage = languageList.filter(function(l){ //筛选出符合的语言
|
||||
if (parameter_i18n) //如果已指定就用指定的语言
|
||||
return parameter_i18n.indexOf(l.i18n)>=0;
|
||||
|
@ -257,11 +258,11 @@ window.onload = function()
|
|||
});
|
||||
//▲添加语言列表结束
|
||||
//▼添加数据来源列表开始
|
||||
let dataSelectDom = controlBox.querySelector(".datasource");
|
||||
const dataSelectDom = controlBox.querySelector(".datasource");
|
||||
dataSourceList.forEach(function(ds){
|
||||
dataSelectDom.options.add(new Option(ds.source,ds.code));
|
||||
});
|
||||
let parameter_dsCode = getQueryString("s"); //获取参数指定的数据来源
|
||||
const parameter_dsCode = getQueryString("s"); //获取参数指定的数据来源
|
||||
let havingDataSource = dataSourceList.filter(function(ds){ //筛选出符合的数据源
|
||||
return ds.code == parameter_dsCode;
|
||||
});
|
||||
|
@ -287,9 +288,11 @@ window.onload = function()
|
|||
return;
|
||||
}
|
||||
initialize();//初始化
|
||||
statusLine.classList.remove("loading-mon-info");
|
||||
//如果通过的话就载入URL中的怪物数据
|
||||
reloadFormationData();
|
||||
}
|
||||
statusLine.classList.add("loading-mon-info");
|
||||
GM_xmlhttpRequest({
|
||||
method: "GET",
|
||||
url:`monsters-info/mon_${currentDataSource.code}.json`, //Cards数据文件
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>智龙迷城车队阵型图制作工具</title>
|
||||
<link rel="shortcut icon" href="icon.png" type="image/x-png" />
|
||||
<link rel="shortcut icon" href="images/icon.png" type="image/x-png" />
|
||||
<meta name="viewport" content="width=664" />
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link href="style-monsterimages.css" rel="stylesheet" type="text/css">
|
||||
|
@ -33,7 +33,7 @@ var formation = new Formation(1,6);
|
|||
<button class="btn-show-mon-id" onclick="toggleShowMonId();"></button>
|
||||
<button class="btn-multi-link" onclick="swapSingleMulitple();"></button>
|
||||
</div>
|
||||
<div class="information"></div>
|
||||
<div class="status"><span class="icon"></span><span class="text"></span></div>
|
||||
</div>
|
||||
<div class="formation-box">
|
||||
<div class="title-box"><input type="text" class="title" placeholder="输入队伍标题" /></div>
|
||||
|
|
20
style.css
20
style.css
|
@ -9,7 +9,14 @@
|
|||
url("fonts/FOT-KurokaneStd-EB.eot") format('embedded-opentype'),
|
||||
url("fonts/FOT-KurokaneStd-EB.svg") format('svg');
|
||||
}
|
||||
|
||||
@keyframes loading-animate{
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(3600deg);
|
||||
}
|
||||
}
|
||||
body{
|
||||
font-family: "Microsoft Yahei","Source Han Sans",Arial, Helvetica, sans-serif;
|
||||
--search-icon-unchecked: 0.4;
|
||||
|
@ -43,6 +50,17 @@ body{
|
|||
background-color: #eee;
|
||||
padding: 0;
|
||||
}
|
||||
/*.status.loading-mon-info .text::before{
|
||||
content: "正在加载怪物数据";
|
||||
}*/
|
||||
.status.loading-mon-info .icon{
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url(images/loading.png);
|
||||
background-size: cover;
|
||||
animation: loading-animate 10s infinite linear;
|
||||
}
|
||||
ul{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
Loading…
Reference in New Issue