◆少前百科是非盈利性、非官方的少女前线维基百科。 ◆如果您发现某些内容错误/空缺,请勇于修正/添加!参与进来其实很容易!点这里 加入少前百科。 ◆有任何意见、建议、纠错,欢迎在 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:last-child {
float:right; margin-right: 1rem;
} 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;
}
- tableemptyMini {
background-size: 50px; height: 50px; font-size: 1.5rem; color: red; text-align: center;
}
- miniTdolltable{
overflow: hidden; margin: 0px; display: table;
}
- 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 > td {
background-size: 50px; height: 50px; font-size: 1.5rem; color: red;
} 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;} div#TDollQuery {display:none;}
</style>
<input type="checkbox" id="iconOnly" onclick="apply_filter()" /><label for="iconOnly">精简模式</label>
每页<select id="per-page"><option>50</option><option>100</option><option>200</option><option>500</option></select> 数据载入中,请稍后 第<select id="cur-page"></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 tStructure = `
` var mintStructure = `
<tbody></tbody>` var emptydiv = "\\无结果\<\/td\>\<\/tr\>"; //无结果label var loadingdiv = "\\载入中\<\/td\>\<\/tr\>"; //载入中label
var reloadstop = true; //阻止重复调用refreshLoad() 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 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; }
function firstLoad() { sortList.sort(firstBy(function(a,b){return b.timeStamp - a.timeStamp}).thenBy(function(a,b){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")} for (var i = 0; i < pages; i++) { if($('#cur-page option')[i]){continue}else{$('#cur-page').append(`<option>${i+1}</option>`)} } $('#cur-page option')[0].selected = true; if (pushlist.length == 0) { document.getElementById("resultBox").innerHTML = "无结果"; } else { if (pushlist.length==sortList.length) { document.getElementById("resultBox").innerHTML = `共${pushlist.length}个,选择条件查询`; } else { document.getElementById("resultBox").innerHTML = `共${pushlist.length}个` ; } } page_switch(); //最终输出函数 };
function page_switch(){ 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")+1; for (var i = 0; i < len; i++) { if(!pushlist[i+cPage*len]){break}else{splitList.push(pushlist[i+cPage*len])} } console.log(splitList) parse_list(splitList) }
function change_page(){ var cSel = $("#cur-page").prop(selectedIndex); if(this.id=="NextPage"){cSel++}else{cSel--} $("#cur-page option")[cSel].selected = true; var cLen = $("#cur-page option").length; switch(cSel){ case 0:$("#PrevPage").css('visibility',"hidden");$("#NextPage").css('visibility',"visible"); case cLen:$("#PrevPage").css('visibility',"visible");$("#NextPage").css('visibility',"hidden") } page_switch(); }
function parse_list(pushdata){ var htmlLine = "",output = ""; var ministat = document.getElementById("iconOnly"); if (ministat.checked==true){//小图标模式 for (var i in pushdata) {
var line = `\
htmlLine += line; }
output = `<tbody></tbody>${htmlLine} |
} else {// 表格模式 for (var i in pushdata) { var tileCond = pushdata[i].tiles.split(",");
var line = ` No.${pushdata[i].id} <a href="${pushdata[i].url}" title="${pushdata[i].nameIngame}">${pushdata[i].nameIngame}</a>${pushdata[i].type} ${pushdata[i].baseHp}
(${pushdata[i].baseHp * 5})${pushdata[i].baseAtk}${pushdata[i].baseRate}${pushdata[i].baseAcc}${pushdata[i].baseEva}${pushdata[i].baseArmor}${pushdata[i].productionTime} ${pushdata[i].tilesAffect}
<tbody></tbody>
htmlLine += line; }
output = ` <thead></thead><tbody>${htmlLine}</tbody>
编号 | 枪名 | 头像 (稀有度) | 枪种 | 生命 (5编制) | 伤害 | 射速 | 命中 | 回避 | 护甲 | 建造时间 | 影响格& 有效枪种 |
影响效果 (5编制) | 技能 |
---|
} document.getElementById('position-marker').innerHTML = output; }
function invertSelect(box){//反选函数 var get_checker_box = box.parentNode.getElementsByTagName("input"); for(var i = 0;i<get_checker_box.length;i++){ if(get_checker_box[i].checked){get_checker_box[i].checked=false}else{get_checker_box[i].checked=true} } apply_filter(); }
function clearSelect(box){ //清除选择 var get_checker_box = box.parentNode.getElementsByTagName("input"); for(var i = 0;i<get_checker_box.length;i++){ get_checker_box[i].checked=false } apply_filter(); }
function clearItem(){inputText.value = ""} //清除输入框内容
function mod_check(query){ //心智升级人形判断函数 var modcheck = document.getElementById('DGMindupgraded').checked; var normalcheck = document.getElementById('nonDGMindupgraded').checked; if (!(modcheck^normalcheck)){ return true; } else { if(query.mod == 1){ if(modcheck){return true;}else{return false;} } else { if(normalcheck){return true;}else{return false;} } } }
function text_check(query){ //文本输入框判断(现仅实现判断枪名) if (!inputText){return true}; var a = new RegExp(inputText.value,"i").test(query.nameIngame); if (a) { return true } else { return false } }
function rarity_check(query){ //稀有度判断 var rCheck = new Array(); var nt=0; for (var i = 1;i <= 6;i++){ rCheck[i] = document.getElementById('rarity'+i).checked; if (rCheck[i]) {nt++} } if (nt == 0){return true} else { if(rCheck[query.rarity]){return true} else {return false} } }
function type_check(query){ //枪种判断 var tCheck = new Array(); var nt=0; var type = ["MG","RF","AR","HG","SG","SMG"] for (var i = 0;i < type.length ;i++){ tCheck[type[i]] = document.getElementById(type[i]+'Doll').checked; if (tCheck[type[i]]) {nt++} } if (nt == 0){return true} else { if(tCheck[query.tdollClass]){return true} else {return false} } } /*------------------------------------------------------------------------------------------/ / 影响格查询部分 START / / 影响格查询实现思路来源于少女前线英文维基 https://en.gfwiki.com/wiki/T-Doll_Tile_Search/ / / 本代码作者 http://www.gfwiki.org/w/user:Mikumikuer/ / / Doll tile Search idea inspired by https://en.gfwiki.com/wiki/T-Doll_Tile_Search / / coding by http://www.gfwiki.org/w/user:Mikumikuer/ / /------------------------------------------------------------------------------------------*/ var tileshook = document.querySelectorAll("table.tileSearch td"); for (var i = 0 ; i < tileshook.length ; i++){ tileshook[i].onclick = function(){activeTile(this)} }
function activeTile(tile){//切换影响格状态 if(!tile.className){tile.className="active"}else{tile.className=""} apply_filter(); }
function getEffectrange(){//获取查询影响位置 var effect_tileSet = new Array(3) var querySet = document.getElementById("effectarea").getElementsByTagName("tr"); for (var i = 0 ;i <querySet.length ;i++ ){ effect_tileSet[i] = new Array(3); var queryCol = querySet[i].getElementsByTagName("td") for (var j = 0; j < queryCol.length; j++) { if(!queryCol[j].className){ effect_tileSet[i][j] = 0 } else { effect_tileSet[i][j] = 1 } } } return effect_tileSet; }
function getSelfpos() {//获取查询人形位置 去除同位置有查询影响格的位置 var Self_pos = new Array(); var querySet = document.getElementById("selfpos").getElementsByTagName("tr") for (var i = 0 ;i <querySet.length ;i++ ){ var queryCol = querySet[i].getElementsByTagName("td") for (var j = 0; j < queryCol.length; j++) { if(!!queryCol[j].className){ if(document.getElementById("effectarea").getElementsByTagName("tr")[i].getElementsByTagName("td")[j].className == ""){Self_pos.push({x:i,y:j})} } } } return Self_pos; }
function combineTilesArray(dollpos) { var combination = new Array(); for (var i = 0; i < dollpos.length; i++) { combination[i]=getEffectrange(); combination[i][dollpos[i].x][dollpos[i].y] = 2 } return combination; }
function add_offsetArray(deltaX,deltaY,targetArray){ var transArray = [[0,0,0],[0,0,0],[0,0,0]]; var count=0; for (var i = 0; i < targetArray.length; i++) { transArray[i+deltaX]=new Array(); for (var j = 0; j < targetArray[i].length; j++) { count++ if(i+deltaX>2||i+deltaX<0){if(targetArray[i][j]==1){return false}}; if(j+deltaY>2||j+deltaY<0){if(targetArray[i][j]==1){return false}}; if(targetArray[i][j]==0){continue} transArray[i+deltaX][j+deltaY]=targetArray[i][j]; } } return transArray }
function compare_tiles(queryTile,dollTile){ var point = 0; for (var i = 0; i < dollTile.length; i++) { for (var j = 0; j < dollTile[i].length; j++) { if(!queryTile[i][j]){if(dollTile[i][j]==0){point++}} else if(queryTile[i][j]==1){if(queryTile[i][j]==dollTile[i][j]){point++}else{point-=10}} else{continue} } } if(point>0){return true}else{return false} }
function tiles_check(query){//影响格查找人形 if(document.querySelectorAll("table#effectarea td.active").length==0){return true} var tdoll_tile_data = query.tiles.split(',') var tdoll_tile= new Array(3); var count = 0 for (var i = 0 ;i < 3 ;i++ ){ tdoll_tile[i] = new Array(3); for (var j = 0; j < 3 ; j++) { tdoll_tile[i][j]=parseInt(tdoll_tile_data[count]);if(tdoll_tile_data[count]==2){var tdoll_position = {x:i,y:j};}count++; } } var possible_dollpos = getSelfpos(); var valid_combination = combineTilesArray(getSelfpos()); for (var k = 0; k < possible_dollpos.length; k++) {//将要查询的人形影响格偏移至提供的人形影响格数据位置 var offset_x = tdoll_position.x - possible_dollpos[k].x;//x偏移值 var offset_y = tdoll_position.y - possible_dollpos[k].y;//y偏移值 var offset_tile = add_offsetArray(offset_x,offset_y,valid_combination[k]);//偏移的影响格矩阵,偏移后超出3x3 返回false if(!offset_tile){continue}; var result = compare_tiles(offset_tile,tdoll_tile); if(!result){continue}else{return true} } return false } /*----------------------/ / 影响格查询部分 END / /----------------------*/
function obtainMethod_check(query){ //获取方式 var checkStat = []; checkStat.push(document.getElementById('buildObtain').checked,document.getElementById('dropObtain').checked,document.getElementById('otherObtain').checked); var j = 0; for (var i = 0;i<checkStat.length;i++){if(checkStat[i]==false){continue}else{j++}} if (j==0){return true;} if(checkStat[0]==true){if(query.obtainBuild==1){return true;}} if(checkStat[1]==true){if(query.obtainDrop==1){return true;}} if(checkStat[2]==true){if(query.obtainSpecial==1){return true;}} return false; }
function filter_box(cond){ //筛选条件汇总 return mod_check(cond)&&text_check(cond)&&rarity_check(cond)&&type_check(cond)&&tiles_check(cond)&&obtainMethod_check(cond); }
function classIconFilter(){ //人形图标筛选 var tab = decodeURIComponent(location.hash.replace('#', ))+"Doll"; clearSelect(document.getElementById(tab)); document.getElementById(tab).checked = 'true'; apply_filter();location.hash=; }
$(window).on('hashchange', function(e){if(decodeURIComponent(location.hash.replace('#', ))!=){classIconFilter();}});
$("#inputQuery").on('input propertychange',debounce(250, function (){apply_filter();}));
</script>