◆少前百科是非盈利性、非官方的少女前线维基百科。 ◆如果您发现某些内容错误/空缺,请勇于修正/添加!参与进来其实很容易!点这里 加入少前百科。 ◆有任何意见、建议、纠错,欢迎在 GFwiki:反馈与建议 提出和讨论。编辑事务讨论QQ群:597764980,微博@GFwiki少前百科 ◆To foreigners,You can use twitter to contact us. |
Widget:Tdollquery2
<style type="text/css"> div.tileSearchCond {
display: inline-block; width: 100px;
} div.tileSearchCond:first-of-type {
margin-left:1rem
}
table.tileSearch { display:table; margin: 0.1rem 1rem 0.1rem auto; } table.tileSearch td{ padding:10px; background-color:#444 } table.tileSearch#selfpos td.active{ background-color:#fff; } table.tileSearch#effectarea td.active{ background-color:#00ffff; } div#buttonContainer {
position:relative;
} div#buttonContainer span:first-child {
float:right; margin-right: 1rem;
} .skin-minerva #content div#buttonContainer div:not(#TDollQuery) button {
padding: 6px 15px; height: auto; margin-bottom: 0px !important;
} @media screen and (max-width:650px){
.skin-minerva #Tdolltable {font-size:0.8rem} .skin-minerva #Tdolltable .TDavatar {width:80px;height:80px}
} div#buttonContainer button {
height: 25px; padding: 0px 10px; margin: 0px; background-color:#DDD; background-image: linear-gradient(-45deg,#f4c430 5px,transparent 5px); border: 0px solid !important; position: relative; top: 0px;
} div#buttonContainer button:active {
background-color:#f4c430;
} div#buttonContainer button:hover {
background-color:#bbb;
} div#buttonContainer button:hover:active {
background-color:#f4c430;
} div#buttonContainer.disabled::after {
content:""; width: 100%; height: 100%; top: 0px; position: absolute; left: 0px; background-image: repeating-linear-gradient(-45deg,red 3px,red 4px,transparent 5px,transparent 20px); box-shadow: inset 0 0 0 2px red;
}
- tableloadingMini {
background-image: url('/images/a/ac/Gfloading.gif'); background-repeat: no-repeat; background-attachment: local; background-position: bottom right; background-size: 50px; height: 50px; text-align: right; padding-right: 4rem; font-size: 1.5rem; vertical-align: bottom;
}
- miniTdolltable{
overflow: hidden; margin: 0px; display: table;
}
- miniTdolltable .TDavatar:hover {transform:scale(1.05);z-index:10}
- miniTdolltable .TDavatar{
transition: 0.2s all ease-in-out;
}
- tableloading > td {
background-image: url('/images/a/ac/Gfloading.gif'); background-repeat: no-repeat; background-attachment: local; background-position: bottom right; background-size: 50px; height: 50px; text-align: right; padding-right: 4rem; font-size: 1.5rem; vertical-align: bottom;
}
- Tdolltable{
margin: 0px;
}
- tableempty{
background-size: 50px; height: 50px; font-size: 1.5rem; color: red; text-align: center;
} div#TDollQuery {
vertical-align:baseline; width:auto; display: inline-flex; overflow:hidden; transition: all 0.1s ease-in;
} div#TDollQuery input#inputQuery {
padding:0px; margin:0px; top:0px; border:0px solid; border-left:5px solid #eaeaea; box-shadow: inset 0 0 5px black; padding-left:5px; transition: all 0.1s ease-in;
} div#TDollQuery input#inputQuery:focus {
border-color:#F4c430;
} .disabled {
pointer-events: none; opacity: 0.7; filter: blur(0px);
} @media screen and (max-width: 640px) {
#miniTdolltable div.TDavatar {width:20%;height:20%}
} td.tiles > table { margin-inline-start: auto; margin-inline-end: auto; border-spacing: 2px; background: rgba(255, 255, 255, 0.33); border: 0px; } .tilesTable td{padding:10px;} .tilesTable td.color0{background:#444444;} .tilesTable td.color1{background:#00ffff;} .tilesTable td.color2{background:#ffffff;} .tilesTable td.color3{background:#FFC400;}
- buttonContainer div>label>input {
display:none; } div#buttonContainer div:not(#TDollQuery) button {
padding: 8px 15px; height: auto; margin-bottom: 1px !important;
} div#buttonContainer div {
margin:0; margin-bottom: 3px !important;
}
- buttonContainer div>label {
display: inline-block; margin: 0; position: relative; overflow: hidden; vertical-align: top;
}
- buttonContainer div>label>div {
padding: 5px 10px; text-align: center; border: #dddddd solid 1px; user-select: none; overflow: hidden; position: relative;
}
- buttonContainer div>label>input:checked + div {
border:#f4c430 solid 1px; color:#f4c430; }
- buttonContainer div>label>input:checked + div:after {
content:; display:block; width:20px; height:20px; background-color:#f4c430; transform:skewY(-45deg); position:absolute; bottom:-10px; right:0; z-index:1; }
- buttonContainer div>label>input:checked + div:before {
content:; display:block; width:3px; height:8px; border-right:#000 solid 2px; border-bottom:#000 solid 2px; transform:rotate(35deg); position:absolute; bottom:2px; right:4px; z-index:2; }
.sort-list>label { display:inline-block; margin:0; position:relative; overflow:hidden; } .sort-list>label>input { display:none; } .sort-list>label>div {
padding: 5px 15px; text-align: center; border: #dddddd solid 1px; user-select: none; overflow: hidden; position: relative;
} .sort-list>label>input:checked + div { border:#f4c430 solid 1px; color:#f4c430; } .sort-list>label>input[data-sort-order=desc]:checked + div:after { content:; display:block; width:20px; height:20px; background-color:#f4c430; transform:skewY(-45deg); position:absolute; bottom:-10px; right:0; z-index:1; } .sort-list>label>input[data-sort-order=desc]:checked + div:before {
content: ; display: block; width: 5px; height: 5px; border-right: #000 solid 2px; border-bottom: #000 solid 2px; transform: rotate(0); position: absolute; bottom: 3px; right: 3px; z-index: 2;
}
.sort-list>label>input[data-sort-order=asc]:checked + div:after {
content: ; display: block; width: 20px; height: 20px; background-color: #f4c430; transform: skewY(-45deg); position: absolute; top: -10px; left: 0; z-index: 1;
} .sort-list>label>input[data-sort-order=asc]:checked + div:before { content: ;
display: block; width: 5px; height: 5px; border-right: #000 solid 2px; border-bottom: #000 solid 2px; transform: rotate(180deg); position: absolute; top: 3px; left: 3px; z-index: 2;
}
div#TDollQuery {display:none;}
</style>
每页<select id="per-page" style="background: white;"><option>50</option><option>100</option><option>200</option><option>500</option></select> 数据载入中,请稍后 第<select id="cur-page" style="background: white;"></select>页
<a id="NextPage" href="javascript:void(0);" style="visibility: visible;float: right;">下一页▶</a>
<script type="text/javascript">
window.DollsData = new Array; $(".dolldata").each( function (index, element){ var o = new Object(); for (var k in element.dataset){ if(k!="artist"){o[k] = element.dataset[k]} } window.DollsData.push(o); element.remove(); })//获取数据
var pushlist=new Array(); var sort_loaded; var inputText = document.getElementById("inputQuery") //文本框定义 var sortList = window.DollsData; // 初始化人形数据
var emptydiv = "\
var inputer = document.getElementById("buttonContainer").getElementsByTagName("input") var baseurl = "\/w\/TDL"
var debounce = function(idle, action){ //去抖函数 文本框使用
var last return function(){ var ctx = this, args = arguments clearTimeout(last) last = setTimeout(function(){ action.apply(ctx, args) }, idle) }
}; function mod_key(str,obj){ var stat=""; var key=""; var show=$("#MOD3Data").prop("checked"); if(obj.mod==1&&show){stat="mod"}else{stat="base"} switch(str){ case "skill":if (obj.mod==1&&show) {key=`${str}2`}else{key=`${str}1`};break; case "tiles":if (obj.mod==1&&show) {key=`${str}Mod`}else{key=str};break; case "rarity":if (obj.mod==1&&show) {key='modRarity'}else{key=str};break; case "avatar":if (obj.mod==1&&show) {key=str+"Mod"}else{key=str};break; case "affect":if (obj.mod==1&&show) {key="tilesAffectMod"}else{key="tilesAffect"};break; case "mod":if (obj.mod==1&&show) {key=true}else{key=false};break; default:key=`${stat}${str}`;break; } return key; }
//排序函数 var index=$("input[name=sort]"); var lastSort=index[0]; index[0].checked=true;index.attr("data-sort-order","desc"); var sortOrder=-1;
var sortType=new Object(); sortType.sortId=function (a,b){return sortOrder*(a.id - b.id)} sortType.sortRarity=function (a,b){if (a[mod_key("rarity",a)] != b[mod_key("rarity",b)]){return sortOrder*(a[mod_key("rarity",a)] - b[mod_key("rarity",b)])};return sortType.sortId(a,b)} sortType.sortReldate=function (a,b){if (a.timeStamp != b.timeStamp){return sortOrder*(a.timeStamp - b.timeStamp)};return sortType.sortId(a,b)} sortType.sortAtk=function (a,b){if (a[mod_key("Atk",a)] != b[mod_key("Atk",b)]) {return sortOrder*(a[mod_key("Atk",a)] - b[mod_key("Atk",b)])};return sortType.sortRarity(a,b)} sortType.sortHp=function (a,b){if (a[mod_key("Hp",a)] != b[mod_key("Hp",b)]) {return sortOrder*(a[mod_key("Hp",a)] - b[mod_key("Hp",b)])};return sortType.sortRarity(a,b)} sortType.sortEva=function (a,b){if (a[mod_key("Eva",a)] != b[mod_key("Eva",b)]) {return sortOrder*(a[mod_key("Eva",a)] - b[mod_key("Eva",b)])};return sortType.sortRarity(a,b)} sortType.sortAcc=function (a,b){if (a[mod_key("Acc",a)] != b[mod_key("Acc",b)]) {return sortOrder*(a[mod_key("Acc",a)] - b[mod_key("Acc",b)])};return sortType.sortRarity(a,b)} sortType.sortArmor=function (a,b){if (a[mod_key("Armor",a)] != b[mod_key("Armor",b)]) {return sortOrder*(a[mod_key("Armor",a)] - b[mod_key("Armor",b)])};return sortType.sortRarity(a,b)} sortType.sortRate=function (a,b){if (a[mod_key("Rate",a)] != b[mod_key("Rate",b)]) {return sortOrder*(a[mod_key("Rate",a)] - b[mod_key("Rate",b)])};return sortType.sortRarity(a,b)} sortType.sortProtime=function (a,b){if (a.productionTime != b.productionTime){return sortOrder*(a.productionTime > b.productionTime?1:-1)};return sortType.sortRarity(a,b)}
function sortStatusChange(obj){ if(obj==lastSort&&obj.dataset.sortOrder=="desc"){$(obj).attr("data-sort-order","asc")}else{$(obj).attr("data-sort-order","desc")} if(obj.dataset.sortOrder=="asc"){sortOrder=1}else{sortOrder=-1} lastSort=obj; page_switch() } index.on("click",function(){sortStatusChange(this)}); //排序END
function getURLParam(name) { //解析url参数
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}
var decoded = getURLParam("filter");
function decode_checker(code) {//传输checkbox选择情况 var check_status = code.split(","); var checker = new Array(); for (var i = 0;i<inputer.length;i++){ if(inputer[i].type=="checkbox"){checker.push(inputer[i])} }; for (var i = 0; i < checker.length; i++) { if(check_status[i]=="1"){ checker[i].checked = true;console.log(checker[i].innerHTML); } else { checker[i].checked = false } } }
$(function(){if(getURLParam("filter")){decode_checker(decoded)};if (getURLParam("intext")) {inputText.value = getURLParam("intext")}});
RLQ.push(function(){ //首次载入函数,RLQ.push防止mwapi未载入时加载 if(document.getElementById("section_0")){//判断是否为移动前端 document.getElementById("iconOnly").checked = true; } sortList.sort(function(a,b){if(b.timeStamp != a.timeStamp){return b.timeStamp - a.timeStamp};return b.id - a.id}) apply_filter(); } );
function apply_filter(){//筛选、排序函数 pushlist=new Array(); for (var i = 0; i < sortList.length; i++) { if(filter_box(sortList[i])){
pushlist.push(sortList[i]) } }; var pages; switch($('#per-page').prop("selectedIndex")){ case 0:pages = Math.ceil(pushlist.length/50);break; case 1:pages = Math.ceil(pushlist.length/100);break; case 2:pages = Math.ceil(pushlist.length/200);break; case 3:pages = Math.ceil(pushlist.length/500);break; } if (pages == 1) {$("#PrevPage,#NextPage").css('visibility',"hidden")}else{$("#PrevPage").css('visibility',"hidden");$("#NextPage").css('visibility',"visible")} if(pages != 0){$("#cur-page option").remove();for (var i = 0; i < pages; i++) {$('#cur-page').append(`\<option\>${i+1}\<\/option\>`)};}else{$("#cur-page option").remove();$('#cur-page').append(`\<option\>1\<\/option\>`);}
$('#cur-page option')[0].selected = true; document.getElementById("resultBox").innerHTML = `共${pushlist.length}个`; if (pushlist.length == 0) {$("#position-marker").html(emptydiv);return pushlist} page_switch(); //最终输出函数 };
function page_switch(){ pushlist.sort(function(a,b){return sortType[lastSort.id](a,b)}); var splitList = new Array(); var len; switch($('#per-page').prop("selectedIndex")){ case 0:len=50;break; case 1:len=100;break; case 2:len=200;break; case 3:len=500;break; } var cPage = $("#cur-page").prop("selectedIndex"); for (var i = 0; i < len; i++) { if(!pushlist[i+cPage*len]){break}else{splitList.push(pushlist[i+cPage*len])} } parse_list(splitList) }
function change_page(obj){ var cSel = $("#cur-page").prop("selectedIndex"); if(obj.id=="NextPage"){cSel++}else if(obj.id=="PrevPage"){cSel--} $("#cur-page option")[cSel].selected = true; var cLen = $("#cur-page option").length-1; switch(cSel){ case 0:$("#PrevPage").css('visibility',"hidden");$("#NextPage").css('visibility',"visible");break; case cLen:$("#PrevPage").css('visibility',"visible");$("#NextPage").css('visibility',"hidden");break; default:$("#PrevPage,#NextPage").css('visibility',"visible");break; } page_switch(); }
$("#PrevPage,#NextPage").on("click",function(){change_page(this)}); $("#cur-page").on("change",function(){change_page(this)}); $("#per-page").on("change",function(){apply_filter()});
function parse_list(pushdata){ var htmlLine = "",output = ""; var ministat = document.getElementById("iconOnly");
if (ministat.checked==true){//小图标模式 for (var i in pushdata) { if(mod_key("mod",pushdata[i])){var url_hash = pushdata[i].url+"#MOD3"}else{var url_hash = pushdata[i].url}
var line = `\htmlLine += line; }
output = `<tbody>${htmlLine}\<\/td><\/tr><\/tbody><\/table>`
} else {// 表格模式 for (var i in pushdata) { var tileCond = pushdata[i][mod_key("tiles",pushdata[i])].split(","); if(mod_key("mod",pushdata[i])){var url_hash = pushdata[i].url+"#MOD3"}else{var url_hash = pushdata[i].url} var line = ` | ||||||||||||||||||||||||||||||||||||
No.${pushdata[i].id}<\/td> | <a href="${url_hash}" title="${pushdata[i].nameIngame}">${pushdata[i].nameIngame}<\/a><\/b><\/td> | <a href="${url_hash}" title="${pushdata[i].nameIngame}"><\/a><\/div><\/td>
| <a href="#${pushdata[i].tdollClass}" title="点击筛选${pushdata[i].type}人形"><\/a> ${pushdata[i].type}<\/td> | ${pushdata[i][mod_key("Hp",pushdata[i])]} (${pushdata[i][mod_key("Hp",pushdata[i])] * 5})<\/td> | ${pushdata[i][mod_key("Atk",pushdata[i])]}<\/td> | ${pushdata[i][mod_key("Rate",pushdata[i])]}<\/td> | ${pushdata[i][mod_key("Acc",pushdata[i])]}<\/td> | ${pushdata[i][mod_key("Eva",pushdata[i])]}<\/td> | ${pushdata[i][mod_key("Armor",pushdata[i])]}<\/td> | ${pushdata[i].productionTime} <\/td> | ${pushdata[i][mod_key("affect",pushdata[i])]} <tbody>
|