. 代碼如下:
<h1>手機號碼歸屬地查詢</h1>
<div class="outer">
<p>請輸入手機號碼</p>
<input type="text" >
<span class="button">查詢</span>
<span class="error">號碼有誤 或 無數據</span>
<ul>
<li class="num">手機號碼: <span></span></li>
<li class="province">歸屬省份: <span></span></li>
<li class="operators">運 營 商: <span></span></li>
</ul>
</div>
<script type="text/javascript" src="query.js" ></script>
<script>
var tel;
var ajax=function(){
//淘寶接口
$.ajax({
type: "get",
url: 'http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel='+tel,
dataType: "jsonp",
jsonp: "callback",
success: function(data){
console.log(data);
$('.error').css('display','none');
var province = data.province,
operators = data.catName,
num = data.telString;
$('.num span').html(num);
$('.province span').html(province);
$('.operators span').html(operators);
},
error:function (){
$('li span').html('');
$('.error').css('display','block');
}
});
}
var reg = /^(13|15|18)[0-9]{9}$/;//點擊查詢
$('.button').click(function(){
tel=$('input[type=text]').val();
if(tel){
if(reg.test(tel)){
ajax();
}else{
$('li span').html('');
$('.error').css('display','block');
}
}
});
//鍵盤事件
$(window).keydown(function(event){
tel=$('input[type=text]').val();
if(event.keyCode==13) {
if(tel){
if(reg.test(tel)){
ajax();
}else{
$('li span').html('');
$('.error').css('display','block');
}
}
}
});
</script>