之前客户给了一个矮鹿的域名检测api接口,专门对接程序的,用于程序自动检测域名轮转,拦截域名自动下线用的
最近买域名比较频繁,总是入坑,一不小心买回来的新域名就是已经被微信拦截的,估计是域名上一任主人没有善待它们
手头上的检测接口直接拿来用很不方便,这才想着写个本地的网页版批量查询工具,自己用,方便!
一下是实现过程(最后附上完整版代码,如果是小白可以直接拿去用):
1.前端代码实现
先扒个版子: 矮鹿主页这个版子看起来还可以就用他改吧。
多余部分去掉,留下head部分,body里留下关键的文本输入框、按钮和结果面板就行了,其他的可以不用动,喜欢其他颜色的可以调整个颜色
主要组件代码
<!--主要页面组建 --> <div class="panel" style="background:#000"> <div class="panel_inner"> <div class="promo"> <!--标题 --> <h2 style="color:#fff">微信域名批量检测工具</h2> </div> <div class="form1"> <!--输入框,可以自己调节大小 --> <textarea class="main-textarea" placeholder="请输入需要检测的链接" type="text" id="text" name="text" value="" size="60" style="height:160px;"></textarea> <!--提交按钮 --> <button type="button" id="btn-tcn" class="main-button" onclick="wxcheck_form()">批量检测</button> </div> <!--输出结果组建 --> <div id="result_panel"></div> </div> </div>
实现效果:
2.js代码部分实现
先载入他们的两个基础包:
<script src="http://juhecdn.oss-cn-hangzhou.aliyuncs.com/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="http://yunapposs.oss-cn-hangzhou.aliyuncs.com/static/web/layer3/layer.js" charset="utf-8"></script>
然后重新修改他们的主方法,修改成可以接入接口的
主方法
主方法分为两部分,页面操作和调用返回输出,这里就不一一叙述了
<script> var notice_msg = ‘矮鹿防封‘; var api_host = ‘http://api.zaiailu.com‘; function wxcheck_form(){ $("#result_panel").hide(); var url_longs = $("#text").val(); if(!url_longs) { alert(‘输入格式不正确!‘); return false; } $.post(api_host+"/"+"wxcheck/web_panel", {url_longs:url_longs},function(result){ $(‘#result_panel‘).html(result); $("#result_panel").show(); wxcheck_handdle(); }); return false; } function wxcheck_handdle() { var wxcheck_api_url = ‘http://api.zaiailu.com/keyisE3AYL43N/wxcheck?url=‘;//检测接口 var em = $("*[data=‘-‘]:eq(0)"); if(em.length>0) { em.attr(‘data‘,‘loading‘); em.html(‘<img src="http://www.link114.cn/template/images/loading.gif" />‘); $.get(wxcheck_api_url+em.attr(‘url-long‘),function(result){ if(result.indexOf(‘正常‘)>-1) { em.html(‘<span class="opt-result-ok" style="color:green;">域名正常</span>‘); wxcheck_handdle(); } else if(result.indexOf(‘被封‘)>-1) { em.html(‘<span class="opt-result-fail">域名被封</span>‘); wxcheck_handdle(); } else if(result.indexOf(‘到期‘)>-1) { em.html(‘<span class="opt-result-fail">兄弟,接口到期啦!</span>‘); wxcheck_handdle(); } else { em.html(‘<span class="opt-result-fail">‘+result+‘</span>‘); wxcheck_handdle(); } }); } } </script>
对接接口
js中加了检测接口注释的那一行就是对接接口的地方,替换对接好接口后,一个本地的网页版批量域名检测工具就完成了,不需要上传服务器,页面放在哪里都能用,这样用起来就方便多了。
实现效果
3.代码下载
DEMO我全部写好了,需要的朋友点此下载
下载地址:https://wxcheck-demo.oss-cn-hangzhou.aliyuncs.com/wxCheck_DEMO.rar