增加载入进度提示

This commit is contained in:
枫谷剑仙 2020-01-16 21:44:48 +08:00
parent 9479442eb8
commit 0e70b1a29e
13 changed files with 48 additions and 12 deletions

View File

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
images/loading.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 488 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

View File

@ -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">

View File

@ -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;

View File

@ -1,4 +1,7 @@
@charset "utf-8";
.status.loading-mon-info .text::before{
content: "モンスターデータを読み込んでいます。";
}
.delay .monster::before{
content: "遅 延\A対 策";
}

View File

@ -1,4 +1,7 @@
@charset "utf-8";
.status.loading-mon-info .text::before{
content: "몬스터 데이터를 로드 하 고 있습니다.";
}
.delay .monster::before{
content: "지 연\A방 지";
}

View File

@ -1,4 +1,7 @@
@charset "utf-8";
.status.loading-mon-info .text::before{
content: "正在載入怪物數據,請稍候。";
}
.delay .monster::before{
content: "應 對\A威 嚇";
}

View File

@ -1,4 +1,7 @@
@charset "utf-8";
.status.loading-mon-info .text::before{
content: "正在加载怪物数据,请稍候。";
}
.delay .monster::before{
content: "应 对\A威 吓";
}

View File

@ -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>

View File

@ -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数据文件

View File

@ -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>

View File

@ -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;