手机号码归属地查询JS跨域

最新推荐文章于 2024-06-13 16:36:05 发布

弎屲

最新推荐文章于 2024-06-13 16:36:05 发布

阅读量1.4k

点赞数 1

文章标签： js css

本文链接：https://blog.csdn.net/cx9977/article/details/108693687

版权

手机号码归属地查询JS跨域

效果图

代码

css代码

body {
	font-family: 'Microsoft YaHei';
}

.wrap {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #fff;


}

.search_form {
	width: 640px;
	margin: 100px auto 0;
}

.logo img {
	display: block;
	margin: 0 auto;
}

.form_group {
	width: 640px;
	height: 40px;
	margin-top: 45px;
}

.input_txt {
	width: 538px;
	height: 38px;
	padding: 0px;
	float: left;
	border: 1px solid #41a1cb;
	outline: none;
	text-indent: 10px;
}

.input_sub {
	width: 100px;
	height: 40px;
	border: 0px;
	float: left;
	background-color: #249e1d;
	color: #fff;
	font-size: 16px;
	outline: none;
	cursor: pointer;
	position: relative;

}

.input_sub.loading::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url('../img/loading.gif');
}

.hotkey {
	margin: 3px 0 0 2px;
}

#ddd {
	color: #666;
	padding-left: 380px;
	padding-top: 120px;
}

.hotkey a {
	font-size: 14px;
	color: #666;
	padding-left: 380px;
	padding-top: 120px;

}

.weather_list {
	height: 200px;
	text-align: center;
	margin-top: 50px;
	font-size: 0px;
}

.weather_list li {
	display: inline-block;
	width: 140px;
	height: 200px;
	padding: 0 10px;
	overflow: hidden;
	position: relative;
	background: url('../img/line.png') right center no-repeat;
	background-size: 1px 130px;
}

.weather_list li:last-child {
	background: none;
}


.info_date {
	width: 100%;
	height: 40px;
	line-height: 40px;
	color: #999;
	font-size: 14px;
	left: 0px;
	bottom: 0px;
	margin-top: 15px;
}

.info_date b {
	float: left;
	margin-left: 15px;
}

.info_type span {
	color: #fda252;
	font-size: 30px;
	line-height: 80px;
}

.info_temp {
	font-size: 14px;
	color: #fda252;
}

.info_temp b {
	font-size: 13px;
}

.tem .iconfont {
	font-size: 50px;
}

body,ul,h1,h2,h3,h4,h5,h6{
    margin: 0;
    padding: 0;
}
h1,h2,h3,h4,h5,h6{
    font-size:100%;
    font-weight:normal;
}
a{
    text-decoration:none;
}
ul{
    list-style:none;
}
img{
    border:0px;
}

/* 清除浮动，解决margin-top塌陷 */
.clearfix:before,.clearfix:after{
    content:'';
    display:table;    
}
.clearfix:after{
    clear:both;
}
.clearfix{
    zoom:1;
}

.fl{
    float:left;
}
.fr{
    float:right;
}

代码（jQuery发送Ajax请求）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>手机号码查询</title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="wrap" id="app">
			<div class="hotkey" style="padding-top: 60px;">
				<a href="javascript:;" id="ddd" style="font-size: 40px;">手机号码归属地专业在线查询</a>
				<br />
				<a href="javascript:;">手机号码(段)：</a>
			</div>
			<div class="search_form" style="margin-top: 5px;">
				<div class="form_group">
					<input type="text" id="city" name="mycity" value="" class="input_txt" placeholder="请输入手机号码(段)" />
					<button class="input_sub" id="ffde">
						查 询
					</button>
				</div>
			</div>
			<div id="fu" align="center" style="margin-top: 20px;"></div>
		</div>
	</body>
</html>
<script type="text/javascript">
	$("#ffde").click(function() {
		var t = /^1[3-9]\d{9}$/;
		if (t.test($("#city").val())) {
			$.ajax({
				type: "GET",
				url: "https://tcc.taobao.com/cc/json/mobile_tel_segment.htm",
				data: {
					tel: $("#city").val()
				},
				jsonp: "callback",
				success: function(res) {
					var re =
						`	<table id="t0" border="1px" width="800px" height="350px">
			<tr>
				<td colspan="2" style="text-align: center;background-color: #F5F5F5;">
				<font  size="3px">查询结果</font></td>
			</tr>
			<tr>
				<td style="text-align: center;">您查询的手机号码段</td>
				<td style="text-align: center;">${res.mts}</td>
			</tr>
			<tr>
				<td style="text-align: center;">卡号归属地</td>
				<td style="text-align: center;">${res.province}</td>
			</tr>
			<tr>
				<td style="text-align: center;">卡类型</td>
				<td style="text-align: center;">${res.catName}</td>
			</tr>
			<tr>
				<td style="text-align: center;">区号</td>
				<td style="text-align: center;">${res.areaVid}</td>
			</tr>
			<tr>
				<td style="text-align: center;">邮编</td>
				<td style="text-align: center;">${res.ispVid}</td>
			</tr>
			<tr>
				<td colspan="2"  style="text-align: center;" ><font color="#249E1D" size="3px">更多详情的邮编区号</font></td>
			</tr>
					
		</table>`;
					fu.innerHTML = re;
				},
				dataType: "jsonp"
			});
		} else {
			alert("请输入正确的手机号！！")
		}
	});
</script>