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

手机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>

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

HTML5第7次课堂笔记（图片验证码的应用,xmlhttprequest对象的使用,跨域）
HTML5第7次课堂笔记 1. 图片验证码的应用:(1)服务端Content-type的控制:(2)客户端防止缓存(仅对GET) 服务器端使用的是jsp 点击图片,实现刷新验证码有时拿不到服务器的 ...
初探MUI制作微信APP页面（一）
国庆假期,祝大家假期快乐,外面下着雨,在家看着教程,整理笔记,方便备查. 知识学习 MUI 是 dcloud公司html5混合移动应用前端框架,可快速搭建手机原生界面应用开发. 特点: 1)极小.原生 ...
初探MUI制作微信APP页面（二）
国庆假期第四天,新的一轮降温开始,外面狂风不止,在家继续优化项目. 上篇把基本框架搭建起来,简单几个子页面的切换,本篇开始对子页面中内容进行优化. 源码及素材地址:Github仓库 MUI 官方文档: ...
【课堂笔记】模型制作流程
一.常用基础功能 1.常用功能拖入到自定义工具栏 shift+ctrl+左键 2.删除边和点 shift+左键+删除边 3.显示当前选中模型 shift+i 空白处点击按shift+i即 ...
PHP学习笔记：利用百度api实现手机归属地查询
从来没有用过api,都不知道怎么获得api的数据,跟着demo,然后修改,终于实现了手机号码查询的功能,代码和说明很全,大家试试. <?php /*** Created by jianqingw ...
oppo手机语音转文字其实很简单，学会这个方法，一分钟搞定课堂笔记
九月开学季,同学们也纷纷返校投入学习中,但迎面而来的是听不完的讲座和记不完的笔记,而讲座老师尤其喜欢口述重点,记录长时间手不仅酸的要死,而且还会因为疲劳而造成错记漏记重点的情况,其实我们利用oppo手 ...
HTML5 权威指南第 10 章文档分节学习笔记
HTML5 权威指南第 10 章文档分节学习笔记第 8 章标记文字内容从从文字出发,专注如何将单体内容正确的呈现出来:第 9 章组织内容内容从段落出发,专注如何将单体内容合理的放在段落中 ...
网件 ip 冲突 vpn_【干货三十一节】数通IP课堂笔记第十五弹，人生贵在行动！...
亲爱的同学们, 天气转凉,记得及时添衣哦! 今年的中秋国庆小长假已结束, 奥斯科金牌课堂笔记也结束假期, 与大家相见啦! 分享笔记之前, 有一段寄语奥斯科老师们想送给大家: 同学们, 每天告诉自己要努 ...
python里面两个大于号_【课堂笔记】Python常用的数值类型有哪些？
学习了视频课程<财务Python基础>,小编特为大家归纳了Python常用的数值类型和运算符,大家一起来查缺补漏吧~~ 数值类型整型(int):整型对应我们现实世界的整数,比如1,2,1 ...

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

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

最新文章

热门文章