Widget:查询测试
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script>(function () { var t = function () { window.jQuery && window.mw ? $ready() : window.setTimeout(t, 100); }; t(); })();</script>
关键字
<input type="text" id="name">
<button onclick="remove()" class="btn" style="width:auto;border-radius: 5px;">重置</button>
品质 <input type="checkbox" id="checkbox-7-1" name="pinzhi" value="绝密"> <label for="checkbox-7-1">绝密</label> <input type="checkbox" id="checkbox-7-2" name="pinzhi" value="机密"> <label for="checkbox-7-2">机密</label> <input type="checkbox" id="checkbox-7-3" name="pinzhi" value="隐密"> <label for="checkbox-7-3">隐密</label>
属性 <input type="checkbox" id="checkbox-7-11" name="shuxing" value="地"> <label for="checkbox-7-11"><img src="https://patchwiki.biligame.com/images/yuan/f/fd/oa5xvwclyfidtrt1qon6o9glye2lxq0.png" alt="">地</label> <input type="checkbox" id="checkbox-7-12" name="shuxing" value="水"> <label for="checkbox-7-12"><img src="https://patchwiki.biligame.com/images/yuan/2/24/flwffpwgn5t326m72gpzy749727ieq0.png" alt="">水</label> <input type="checkbox" id="checkbox-7-13" name="shuxing" value="风"> <label for="checkbox-7-13"><img src="https://patchwiki.biligame.com/images/yuan/4/4c/kz0y7g6bamyc704enczlszyk6m288qv.png" alt="">风</label> <input type="checkbox" id="checkbox-7-14" name="shuxing" value="火"> <label for="checkbox-7-14"><img src="https://patchwiki.biligame.com/images/yuan/5/54/95u5ykui2oigny6poehqdpdoe2hbg79.png" alt="">火</label> <input type="checkbox" id="checkbox-7-15" name="shuxing" value="阴"> <label for="checkbox-7-15"><img src="https://patchwiki.biligame.com/images/yuan/f/f5/nffhpp5mkh15ec24jbb7fg5cze4sqhj.png" alt="">阴</label> <input type="checkbox" id="checkbox-7-16" name="shuxing" value="阳"> <label for="checkbox-7-16"><img src="https://patchwiki.biligame.com/images/yuan/d/d4/21uw6yeirox37r719uos4e0ga7l42cc.png" alt="">阳</label>
职业 <input type="checkbox" id="checkbox-7-21" name="zhiye" value="破军"> <label for="checkbox-7-21">破军</label> <input type="checkbox" id="checkbox-7-22" name="zhiye" value="龙盾"> <label for="checkbox-7-22">龙盾</label> <input type="checkbox" id="checkbox-7-23" name="zhiye" value="岐黄"> <label for="checkbox-7-23">岐黄</label> <input type="checkbox" id="checkbox-7-24" name="zhiye" value="神纪"> <label for="checkbox-7-24">神纪</label> <input type="checkbox" id="checkbox-7-25" name="zhiye" value="诡道"> <label for="checkbox-7-25">诡道</label>
部门 <input type="checkbox" id="checkbox-7-31" name="bumen" value="蛾部"> <label for="checkbox-7-31"><img src="https://patchwiki.biligame.com/images/yuan/c/ca/qr59zb78jwhm165mtwwhwr5eav3wpn4.png" alt="">蛾部</label> <input type="checkbox" id="checkbox-7-32" name="bumen" value="雀部"> <label for="checkbox-7-32"><img src="https://patchwiki.biligame.com/images/yuan/6/6b/elehfdqa9so0nry4spwctrqjarfskz3.png" alt="">雀部</label> <input type="checkbox" id="checkbox-7-33" name="bumen" value="鸢部"> <label for="checkbox-7-33"><img src="https://patchwiki.biligame.com/images/yuan/d/d6/n1dusf5edacarcrtiflcpu8i6xdzgbu.png" alt="">鸢部</label> <input type="checkbox" id="checkbox-7-34" name="bumen" value="蜂部"> <label for="checkbox-7-34"><img src="https://patchwiki.biligame.com/images/yuan/f/f5/rm9bfyoougd4cajkgix8u2sqoj1kuci.png" alt="">蜂部</label> <input type="checkbox" id="checkbox-7-35" name="bumen" value="闲人"> <label for="checkbox-7-35"><img src="https://patchwiki.biligame.com/images/yuan/0/0b/b0skhwgscmu9y17t3nsisw1arln9rxu.png" alt="">闲人</label>
<button onclick="queryData()" class="btn">查询</button> <button onclick="prePage()" class="btn" style="width: 100px;">上一页</button>
<button onclick="nextPage()" class="btn" style="width: 100px;">下一页</button>
<button onclick="prePage()" class="btn" style="width: 100px;">上一页</button> <button onclick="nextPage()" class="btn" style="width: 100px;">下一页</button> <script type="text/javascript">
var page=0 function addCount(a){ var count = new Array(); var str ='+' for (var i = 0; i < a.length; i++) { if (a[i].checked) { //获取复选框的状态,被选中时,该值为true count.push(a[i].value) str = count.join('||'); //统计被选中复选框的个数 }
} return str }
function queryData() {
document.getElementById("show").innerHTML = '
' document.getElementById("number").innerHTML = '
'
var name = document.getElementById("name").value
var pinzhi = document.getElementsByName("pinzhi"); var pinzhistr = addCount(pinzhi);
var shuxing = document.getElementsByName("shuxing"); var shuxingstr = addCount(shuxing);
var zhiye = document.getElementsByName("zhiye"); var zhiyestr = addCount(zhiye);
var bumen = document.getElementsByName("bumen"); var bumenstr = addCount(bumen);
var queryText = '{' + '{#ask:' + if (name !== ) { queryText += '[' + '[关键字::~*' + name + '*]]'; } if (pinzhistr !== '+') { queryText += '[' + '[品质::' + pinzhistr + ']]'; } if (shuxingstr !== '+') { queryText += '[' + '[属性::' + shuxingstr + ']]'; } if (zhiyestr !== '+') { queryText += '[' + '[职业::' + zhiyestr + ']]'; } if (bumenstr !== '+') { queryText += '[' + '[部门::' + bumenstr + ']]'; } queryText += '|?品质|?属性|?职业|?标签1|?标签2|link=none|template=密探ask|headers=hide|format=template|limit=35|sort=排序,创建日期|order=asc,desc' +'|offset='+(page*35)+'|default=已经到最后一页啦!}}'; $.getJSON(mw.util.wikiScript('api'), { format: 'json', action: 'parse', text: queryText, contentmodel: 'wikitext' }).done(function (data) { //console.log(data, "查询······", queryText) document.getElementById("show").innerHTML = data.parse.text["*"] }); var queryNumber = '{' + '{#ask:';
if (name !== ) { queryNumber += '[' + '[关键字::~*' + name + '*]]'; } if (pinzhistr !== '+') { queryNumber += '[' + '[品质::' + pinzhistr + ']]'; } if (shuxingstr !== '+') { queryNumber += '[' + '[属性::' + shuxingstr + ']]'; } if (zhiyestr !== '+') { queryNumber += '[' + '[职业::' + zhiyestr + ']]'; } if (bumenstr !== '+') { queryNumber += '[' + '[部门::' + bumenstr + ']]'; } queryNumber += '|format=count}}'; $.getJSON(mw.util.wikiScript('api'), { format: 'json', action: 'parse', text: queryNumber, contentmodel: 'wikitext' }).done(function (data) { //console.log(data, "查询······") count = parseInt($(data.parse.text["*"]).text()); document.getElementById("number").innerHTML = count }); } setTimeout(function () { console.log("大聪明月白"); queryData(); // 时间间隔 }, 2000);
$("input").change(function () { queryData(); })
//删除
function remove(){ document.getElementById("name").value= var pinzhi = document.getElementsByName("pinzhi"); var shuxing = document.getElementsByName("shuxing"); var zhiye = document.getElementsByName("zhiye"); var bumen = document.getElementsByName("bumen"); for (var i = 0; i < pinzhi.length; i++) {pinzhi[i].checked=false} for (var i = 0; i < shuxing.length; i++) {shuxing[i].checked=false} for (var i = 0; i < zhiye.length; i++) {zhiye[i].checked=false} for (var i = 0; i < bumen.length; i++) {bumen[i].checked=false} queryData(); } // 换页 function prePage(){ if(page>0){ page=page-1 queryData(); } else{ alert('已经是第一页啦') } console.log('上一页',page)
} function nextPage(){ page=page+1 queryData(); console.log('下一页',page) }
</script> <style>
- show>.mw-parser-output{
display:flex;flex-wrap: wrap;justify-content: flex-start;align-items: center; }
input[type="checkbox"] { display: none; } input[type="checkbox"] { display: none; }
[id^="checkbox-7-"]+label>span { position: relative; /* z-index: 99999; */ font-weight: normal; font-size: 18px; }
[id^="checkbox-7-"]+label { background-color: #FFF; padding: 4px 9px; border-radius: 5px; display: inline-block; position: relative; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); overflow: hidden; color: #464E50; margin: 5px 2px; -webkit-transition: all 0.3s linear, color 0 linear; transition: all 0.3s linear, color 0 linear; }
[id^="checkbox-7-"]:checked+label { color: #fff; }
[id^="checkbox-7-"]+label>span { position: relative; z-index: 99999; }
[id^="checkbox-7-"]+label:before { content: ' '; position: absolute; background: #9c877a; width: 0%; height: 100%; top: 0; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; left: 0; }
[id^="checkbox-7-"]:checked+label:before { content: ' '; position: absolute; width: 100%; height: 100%; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); top: 0; left: 0; }
.chaxun { margin: 20px; text-align: left; } .chaxun >div{ border-bottom: 1px #ad9381 dashed; display:flex; flex-wrap:wrap; align-items: center; } .chaxun >div>span{ font-size:20px; margin:0 5px; } .chaxun img{ width: 20px; } input { border: 1px #ad9381 solid; border-radius: 10px; margin: 0 10px; }
input { padding: 5px 10px; }
.btn { border-radius: 50px; width: 100%; background: #9c877a; color: #fff; margin: 10px }
#number { color: #673AB7; font-weight: bold; font-size: 25px; }
.number { text-align: center; font-size: 20px; }
</style>