HTML5第9节课堂笔记(初探mui,制作手机归属地查询)
2016-04-30 22:04
435 查看
手机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>
相关文章推荐
- HTML5 name属性
- H5处理不同支持格式(audio)
- HTML5——行走日记
- HTML5全局属性和事件
- HTML5 - 地理定位
- HTML5-03 页面布局
- html5 web IndexedDB使用详解
- ace admin java 整合 开发 后台框架,aceadmin_HTML5 java spri
- HTML5——将图片拖拽上传
- html5-css样式
- html4向上兼容html5输入框提示placeholder
- CDH5.7中sqoop2使用
- html5之小游戏2048的实现
- html5 拖拽
- 基于HTML5的有弹幕功能的视频播放器
- HTML5头部meta整理
- H5笔记1-本地存储localStorage
- 容联短信验证
- Zookeeper-3.4.5-cdh5.0.1 单机模式、副本模式安装、配置说明
- 每日记录 2016-4-29 HTML5本地存储