查看“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>

<div class="chaxun">
     <div style="text-align: center;">
        <span>关键字</span>
        <input type="text" id="name">
        <button onclick="remove()" class="btn" style="width:auto;border-radius: 5px;">重置</button>
    </div>
    <div>
        <span>品质</span>
        <input type="checkbox" id="checkbox-7-1" name="pinzhi" value="绝密">
        <label for="checkbox-7-1"><span>绝密</span></label>
        <input type="checkbox" id="checkbox-7-2" name="pinzhi" value="机密">
        <label for="checkbox-7-2"><span>机密</span></label>
        <input type="checkbox" id="checkbox-7-3" name="pinzhi" value="隐密">
        <label for="checkbox-7-3"><span>隐密</span></label>
    </div>
    <div>
        <span>属性</span>
        <input type="checkbox" id="checkbox-7-11" name="shuxing" value="地">
        <label for="checkbox-7-11"><span><img src="https://patchwiki.biligame.com/images/yuan/f/fd/oa5xvwclyfidtrt1qon6o9glye2lxq0.png" alt="">地</span></label>
        <input type="checkbox" id="checkbox-7-12" name="shuxing" value="水">
        <label for="checkbox-7-12"><span><img src="https://patchwiki.biligame.com/images/yuan/2/24/flwffpwgn5t326m72gpzy749727ieq0.png" alt="">水</span></label>
        <input type="checkbox" id="checkbox-7-13" name="shuxing" value="风">
        <label for="checkbox-7-13"><span><img src="https://patchwiki.biligame.com/images/yuan/4/4c/kz0y7g6bamyc704enczlszyk6m288qv.png" alt="">风</span></label>
        <input type="checkbox" id="checkbox-7-14" name="shuxing" value="火">
        <label for="checkbox-7-14"><span><img src="https://patchwiki.biligame.com/images/yuan/5/54/95u5ykui2oigny6poehqdpdoe2hbg79.png" alt="">火</span></label>
        <input type="checkbox" id="checkbox-7-15" name="shuxing" value="阴">
        <label for="checkbox-7-15"><span><img src="https://patchwiki.biligame.com/images/yuan/f/f5/nffhpp5mkh15ec24jbb7fg5cze4sqhj.png" alt="">阴</span></label>
        <input type="checkbox" id="checkbox-7-16" name="shuxing" value="阳">
        <label for="checkbox-7-16"><span><img src="https://patchwiki.biligame.com/images/yuan/d/d4/21uw6yeirox37r719uos4e0ga7l42cc.png" alt="">阳</span></label>
    </div>
    <div>
        <span>职业</span>
        <input type="checkbox" id="checkbox-7-21" name="zhiye" value="破军">
        <label for="checkbox-7-21"><span>破军</span></label>
        <input type="checkbox" id="checkbox-7-22" name="zhiye" value="龙盾">
        <label for="checkbox-7-22"><span>龙盾</span></label>
        <input type="checkbox" id="checkbox-7-23" name="zhiye" value="岐黄">
        <label for="checkbox-7-23"><span>岐黄</span></label>
        <input type="checkbox" id="checkbox-7-24" name="zhiye" value="神纪">
        <label for="checkbox-7-24"><span>神纪</span></label>
        <input type="checkbox" id="checkbox-7-25" name="zhiye" value="诡道">
        <label for="checkbox-7-25"><span>诡道</span></label>

    </div>
    <div>
        <span>部门</span>
        <input type="checkbox" id="checkbox-7-31" name="bumen" value="蛾部">
        <label for="checkbox-7-31"><span><img src="https://patchwiki.biligame.com/images/yuan/c/ca/qr59zb78jwhm165mtwwhwr5eav3wpn4.png" alt="">蛾部</span></label>
        <input type="checkbox" id="checkbox-7-32" name="bumen" value="雀部">
        <label for="checkbox-7-32"><span><img src="https://patchwiki.biligame.com/images/yuan/6/6b/elehfdqa9so0nry4spwctrqjarfskz3.png" alt="">雀部</span></label>
        <input type="checkbox" id="checkbox-7-33" name="bumen" value="鸢部">
        <label for="checkbox-7-33"><span><img src="https://patchwiki.biligame.com/images/yuan/d/d6/n1dusf5edacarcrtiflcpu8i6xdzgbu.png" alt="">鸢部</span></label>
        <input type="checkbox" id="checkbox-7-34" name="bumen" value="蜂部">
        <label for="checkbox-7-34"><span><img src="https://patchwiki.biligame.com/images/yuan/f/f5/rm9bfyoougd4cajkgix8u2sqoj1kuci.png" alt="">蜂部</span></label>
        <input type="checkbox" id="checkbox-7-35" name="bumen" value="闲人">
        <label for="checkbox-7-35"><span><img src="https://patchwiki.biligame.com/images/yuan/0/0b/b0skhwgscmu9y17t3nsisw1arln9rxu.png" alt="">闲人</span></label>
    </div>
    
    <button onclick="queryData()" class="btn">查询</button>
    <button onclick="prePage()" class="btn" style="width: 100px;">上一页</button>
<button onclick="nextPage()" class="btn" style="width: 100px;">下一页</button>
</div>

<div class="number">查询到<span id="number">0</span>密探</div>
<div id="show">
    <center>Loading...</center>
</div>
<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 = '<center>Loading...</center>'
         document.getElementById("number").innerHTML = '<center>Loading...</center>'

        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>