Skip to content

Commit 880e964

Browse files
luxiangqiangluxiangqiang
committed
模拟查询IP地址归属地
1 parent e98728c commit 880e964

File tree

1 file changed

+186
-0
lines changed

1 file changed

+186
-0
lines changed

‎查询IP地址归属地/查询IP地址归属地.md

+186
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
```html
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>20万条数据快速定位IP地址的归属地</title>
9+
<style>
10+
div h2{
11+
text-align: center;
12+
}
13+
#div{
14+
width: 1000px;
15+
margin: auto;
16+
}
17+
#input{
18+
width: 400px;
19+
margin: auto;
20+
}
21+
button{
22+
margin-left: 10px;
23+
}
24+
#result{
25+
width: 400px;
26+
margin: auto;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div class="div">
32+
<h2>模拟20万数据快速定位IP地址的归属地</h2>
33+
<div id="input">
34+
请输入IP地址: <input id="ip" type="number" name="number"><button onclick="query">查询</button>
35+
</div>
36+
<div id="result">
37+
<p>查询结果为: <span style="color:red">山东省 潍坊市 电信</span></p>
38+
</div>
39+
</div>
40+
</body>
41+
<script type="text/javascript">
42+
43+
//将 IP 地址转化为整数
44+
const ipInt = (ip) =>{
45+
//IP转成整型
46+
var num = 0;
47+
ip = ip.split(".");
48+
num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]);
49+
num = num >>> 0;
50+
return num;
51+
}
52+
53+
console.log('------------------将IP转化为32位整数---------------------');
54+
console.log(ipInt('255.255.255.255'));
55+
56+
//将整数转化为 IP 地址
57+
const IntIp = (num) =>{
58+
var str;
59+
var tt = new Array();
60+
tt[0] = (num >>> 24) >>> 0;
61+
tt[1] = ((num << 8) >>> 24) >>> 0;
62+
tt[2] = (num << 16) >>> 24;
63+
tt[3] = (num << 24) >>> 24;
64+
str = String(tt[0]) + "." + String(tt[1]) + "." + String(tt[2]) + "." + String(tt[3]);
65+
return str;
66+
}
67+
68+
console.log('------------------将整数转化为IP地址---------------------');
69+
console.log(IntIp(40213210));
70+
71+
let i = 0;
72+
const arrIp = [];
73+
//随机生成 200000 条 IP 数据
74+
while(i < 10000){
75+
const number = Math.floor(Math.random()*10000000);
76+
arrIp.push(number);
77+
i++;
78+
}
79+
80+
//对 20 万条数据进行快速排序
81+
// 参数一(arrIP):要排序的数组IP 参数二(start):指向起始指针 参数三(end):指向末尾指针
82+
const quickSort = (arr,startIndex,endIndex) =>{
83+
//递归终止条件
84+
if(startIndex < endIndex){
85+
//一般选择最后一个元素为区分点(下标索引)
86+
let pivot = endIndex;
87+
//获取一组数据区分后的大于 pivot 点最后元素的索引
88+
let partitionIndex = partition(arr,pivot,startIndex,endIndex);
89+
//进行递归
90+
quickSort(arr,startIndex,partitionIndex-1);
91+
quickSort(arr,partitionIndex+1,endIndex);
92+
}
93+
}
94+
95+
// 获取排好序的区分点 Index
96+
const partition = (arr,pivot,startIndex,endIndex) =>{
97+
//获取到该区分点的值
98+
let pivotVal = arr[pivot];
99+
//永远指向第一个大于 pivot 的值
100+
let swapIndex = startIndex;
101+
//进行筛选
102+
// i 为遍历数据指针
103+
for(let i = startIndex; i < endIndex; i++){
104+
if(arr[i] < pivotVal){
105+
swap(arr,i,swapIndex);
106+
swapIndex++;
107+
}
108+
}
109+
//将大于 pivot 的值和小于 pivot 的值中间点和 pivot 的值交换
110+
swap(arr,swapIndex,pivot)
111+
//返回区分点的索引
112+
return swapIndex;
113+
}
114+
115+
//交换
116+
const swap = (arr,i,j) =>{
117+
let temp = arr[i];
118+
arr[i] = arr[j];
119+
arr[j] = temp;
120+
}
121+
122+
//对 20 万数据匹配IP对属地(二分查找)
123+
const findIpAddress = (arr,value) =>{
124+
//声明两个指针
125+
let low = 0;
126+
let high = arr.length - 1;
127+
128+
while(low <= high){
129+
//取中间值
130+
let mid = Math.floor((low + (high - low))/2);
131+
//判断中间值
132+
if(arr[mid] <= value){
133+
//进一步判断是否是小于 IP 区间的终点值
134+
if(mid == arr.length - 1 || arr[mid + 1] > value){
135+
return mid;
136+
}else{
137+
low = mid + 1;
138+
}
139+
}else{
140+
high = mid - 1;
141+
}
142+
}
143+
return false;
144+
}
145+
146+
//判断该 IP 区间是否可以找到该 IP 地址
147+
const checkIp = (arr,ipStartIndex)=>{
148+
let text = document.getElementById('result')
149+
// 为了模拟，将 IP 地址分为三个区间
150+
if(arr[ipStartIndex] > 0 && arr[ipStartIndex] < 1000000){
151+
text.innerHTML('山东省 潍坊市 电信')
152+
}else if(arr[ipStartIndex] > 1000000 && arr[ipStartIndex] < 2000000){
153+
text.innerHTML('山东省 菏泽市 移动')
154+
}else if(arr[ipStartIndex] > 2000000 && arr[ipStartIndex] < 3000000){
155+
text.innerHTML('中国 福建省 连通')
156+
}else{
157+
text.innerHTML('没有找到该 ip 归属地！')
158+
}
159+
}
160+
161+
162+
console.log('------------------排序前的数据---------------------');
163+
console.log(arrIp.join('|'))
164+
console.log('------------------排序后的数据---------------------');
165+
quickSort(arrIp,0,arrIp.length - 1);
166+
console.log(arrIp)
167+
console.log('--------------------二分查找-----------------------');
168+
// console.log(findIpAddress(arrIp,20000))
169+
170+
let ip = document.getElementById('ip');
171+
let inInt = parseInt(ipInt(ip));
172+
173+
//查询 IP 地址归属地
174+
const query = (ip) =>{
175+
//排序
176+
quickSort(arrIp,0,arrIp.length - 1);
177+
//查找
178+
findIpAddress(arrIp,ip)
179+
//判断
180+
checkIp(arr,index);
181+
}
182+
183+
</script>
184+
</html>
185+
```
186+

0 commit comments

Comments
 (0)