HTML 5第9節授業ノート(muiを初めて探し、携帯電話の帰属地検索を作成)
4915 ワード
携帯電話MUIプログラム、そのajax方法を利用してbaiduのAPIにアクセスします
http://apistore.baidu.com/apiworks/servicedetail/794.html
http://dev.dcloud.net.cn/mui/ajax/
自分で作った携帯の帰属地検索
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>