HTML5第9节课堂笔记（初探mui，制作手机归属地查询）

来源：互联网发布：赛事专用软件源码php 编辑：程序博客网时间：2024/05/21 10:42
手机MUI程序，利用它的ajax方法访问baidu的API
http://apistore.baidu.com/apiworks/servicedetail/794.html
http://dev.dcloud.net.cn/mui/ajax/
自己做的手机归属地查询
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <title></title>    <script src="js/mui.min.js"></script>    <link href="css/mui.min.css" rel="stylesheet"/>    <link href="css/style.css" rel="stylesheet"/></head><body><header class="mui-bar mui-bar-nav" >            <h1 class="mui-title" >号码归属地查询</h1>    </header>      <div class="mui-content"  >     <div class="mui-content-padded">     <p style="text-align:center;margin-bottom: 30px;">                    </p>     <div class="mui-input-group">         <div class="mui-input-row mui-search" ;>          <input type="search" id="number" class="mui-input-clear" placeholder="请输入查询手机号码" >          </div>         <div class="mui-button-row">           <button type="button" class="mui-btn mui-btn-green mui-btn-outlined">查  询</button>          </div>       </div>        <h5 class="mui-content-padded" >号码归属地信息：</h5>                                                 <code id="prefix"></code><br />                                                    <code id="province"></code>                   <code id="city"></code><br />                                                      <code id="type"></code>                  </div>   <script type="text/javascript" charset="utf-8">      var number=document.getElementById('number');    var status=document.getElementById('status');    var type=document.getElementById('type');    var province=document.getElementById('province');    var city=document.getElementById('city');    var prefix=document.getElementById('prefix');    var network;    mui(".mui-input-group").on('tap',"#number",function(){    //重置结果内容为空            prefix.innerHTML=""; province.innerHTML="";  type.innerHTML=""; city.innerHTML="";    });       mui('.mui-input-group').on('tap',".mui-btn",function(){          //判断网络是否连接          mui.plusReady(function () {          network =true ;            if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){              network = false;                }               });                                 if(number.value=="")   {   mui.alert("输入的手机号码不能为空！");   return false;   }   // "[1]"代表第1位为数字1，"[3578]"代表第二位可以为3、5、7、8中的一个，   //  "\\d{9}"代表后面是可以是0～9的数字，有9位。 )   else if(!(/^1[3|4|5|7|8]\d{9}$/.test(number.value))){   mui.alert("输入的手机号码格式有误！");            return false;   }   else{     if(network){                 mui.toast('网络正常,正在发送请求...');                         mui.ajax('http://apis.baidu.com/apistore/mobilenumber/mobilenumber',{   headers:{ //"Access-Control-Allow-Headers":"X-Requested-With","apikey":"d6a8d29e244134149b4583f670676fab"},data:{phone:number.value},dataType:'json',type:'get',success:function(data){prefix.innerHTML="号码段："+data.retData.prefix; province.innerHTML="归属地："+data.retData.province;  type.innerHTML="卡类型："+data.retData.supplier; city.innerHTML=data.retData.city;},error:function(xhr,type,errorThrown){ mui.toast('数据请求失败！');},             });                    }else                    {                        mui.toast("当前网络不给力，请检查网络,重启应用或稍后再试...");                                             }                  }                      });  //返回键处理  //处理逻辑：1秒内，连续两次按返回键，则退出应用；  var first = null;  mui.back = function() {      //首次按键，提示‘再按一次退出应用’      if (!first) {          first = new Date().getTime();          mui.toast('再按一次退出应用');          setTimeout(function() {              first = null;          }, 1000);      } else {          if (new Date().getTime() - first < 1000) {              plus.runtime.quit();          }      }  };     </script>  </body></html>
0 0