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>

沪公网安备 31011002002714 号