原生js 地址定位，動態建立地址字段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://www.xuefu.com/byxf/css/reset.css">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=liXQzVYi9b7qDIOKPabwIurp"></script>
<style> .popup_shadow { width: 100%; height: 100%; background: rgba(0, 0, 0, .7); position: fixed; top: 0; z-index: 1000000; } .popup { width: 600px; height: auto; border-radius: 20px; overflow: hidden; position: fixed; z-index: 9999999999999999999999; top: 50%; left: 50%; margin-left: -300px; margin-top: -206px; } .popup .tit { width: 600px; height: 67px; font-size: 20px; font-weight: 400; color: rgba(255, 255, 255, 1); line-height: 67px; text-align: center; background: rgba(219, 64, 67, 1); } .popup .tit+div { width: 600px; padding-bottom: 16px; background: #fff; } .popup .tit+div>div { margin: 0 30px; } .popup .tit+div>div span, .popup .tit+div>div span+i { font-size: 16px; font-weight: 400; color: rgba(219, 64, 67, 1); } .popup .tit+div .site { padding: 25px 0; border-bottom: 1px #EFEFEF solid; font-size: 0; } .popup .tit+div>div span { padding-right: 15px; } .popup .tit+div>div svg { position: relative; top: 2px; padding-right: 10px; } .popup .tit+div>.site a { width: 45px; height: 24px; background: rgba(219, 64, 67, 1); border-radius: 12px; text-align: center; line-height: 24px; font-size: 14px; color: #fff; display: inline-block; margin-left: 23px; } .popup .tit+div>.site a:hover { background: rgb(192, 41, 44); color: #fff; } .popup .tit+div>div a:hover { cursor: pointer; color: #DB4043; } .site_list ul { font-size: 0; } .site_list ul:first-child { margin-right: 118px; } .site_list ul:first-child li:nth-child(5), .site_list ul:first-child li:nth-child(6) { margin-left: -2px; } .site_list ul li i { font-size: 18px; color: #DB4043; width: 20px; display: inline-block; text-align: center; position: relative; top: 2px; } .site_list ul li { margin-bottom: 15px; } .site_list { padding-top: 20px; } .site_list ul li a { font-size: 14px; color: #666; padding: 0 8px; height: 24px; line-height: 24px; border-radius: 12px; transition: all .1s; display: inline-block; cursor: pointer; } .site_list ul li a:hover { color: rgba(219, 64, 67, 1); color: #fff; } .popup.dis_none, .popup_shadow.dis_none { display: none; } </style>
</head>
<body>
<!-- 遮罩 -->
<div class="popup_shadow" id="popup_shadow"></div>
<!-- 彈窗 -->
<div class="popup" id="pop_up">
<div class="tit">
<h3>歡迎來到學府考研，請選擇合適的學府考研學校所在地</h3>
</div>
<div>
<div class="site">
<svg width="16px" height="15px">
<path fill-rule="evenodd" fill="rgb(219, 64, 67)"
d="M15.503,3.049 L14.003,2.607 C13.703,1.033 12.453,0.000 10.852,0.000 C9.302,0.000 8.002,0.984 7.701,2.459 L5.451,3.099 C5.351,3.148 5.301,3.148 5.251,3.148 C5.151,3.148 5.101,3.148 5.001,3.099 L1.050,1.967 L0.800,1.967 C0.350,1.967 -0.000,2.312 -0.000,2.754 L-0.000,12.836 C-0.000,13.181 0.250,13.525 0.550,13.574 L4.951,14.951 C5.051,15.000 5.101,15.000 5.201,15.000 C5.301,15.000 5.351,15.000 5.401,14.951 L10.552,13.476 C10.652,13.426 10.702,13.426 10.752,13.426 C10.852,13.426 10.902,13.426 11.002,13.476 L14.953,14.656 C15.053,14.705 15.103,14.705 15.203,14.705 C15.653,14.705 16.003,14.361 16.003,13.918 L16.003,3.787 C16.053,3.443 15.803,3.099 15.503,3.049 M5.201,3.984 L5.201,14.213 L0.800,12.836 L0.800,2.754 L4.751,3.885 C4.951,3.935 5.051,3.935 5.201,3.984 C5.201,3.935 5.201,3.935 5.201,3.984 C5.201,3.935 5.201,3.984 5.201,3.984 M10.852,0.787 C12.202,0.787 13.253,1.771 13.253,3.099 C13.253,3.639 13.053,4.180 12.653,4.722 C12.152,5.459 11.402,6.492 10.852,7.328 C10.302,6.541 9.552,5.410 9.052,4.722 C8.652,4.180 8.452,3.590 8.452,3.099 C8.452,1.771 9.452,0.787 10.852,0.787 M15.253,13.967 L11.302,12.787 L11.202,12.787 L11.202,9.639 C11.202,9.394 11.052,9.246 10.802,9.246 C10.552,9.246 10.402,9.394 10.402,9.639 L10.402,12.787 L10.302,12.787 L6.001,13.967 L6.001,3.984 C6.001,3.885 5.951,3.885 5.951,3.787 L7.651,3.295 C7.701,4.033 8.002,4.623 8.352,5.164 C8.852,5.853 9.602,6.935 10.152,7.771 C10.302,8.017 10.552,8.115 10.852,8.115 C11.152,8.115 11.352,8.017 11.552,7.771 C12.052,6.984 12.853,5.853 13.353,5.164 C13.703,4.623 14.053,4.033 14.053,3.394 L15.253,3.738 L15.253,13.967 M10.852,4.377 C11.552,4.377 12.052,3.836 12.052,3.197 C12.052,2.508 11.552,2.017 10.852,2.017 C10.152,2.017 9.652,2.558 9.652,3.197 C9.652,3.885 10.152,4.377 10.852,4.377 M10.852,2.803 C11.102,2.803 11.252,2.951 11.252,3.197 C11.252,3.443 11.102,3.590 10.852,3.590 C10.602,3.590 10.452,3.443 10.452,3.197 C10.452,2.951 10.602,2.803 10.852,2.803 L10.852,2.803 Z" />
</svg>
<span>猜你所在</span>
<i id="location_address">西安市</i>
<a id="jump_in">肯定</a>
</div>
<div class="site_list flex" id="siteList">
</div>
</div>
</div>
<script>
var POP_UP = document.getElementById('pop_up');// 彈窗
var LOCATION_ADDRESS = document.getElementById('location_address');//地區
var JUMP_IN = document.getElementById('jump_in');//肯定按鈕
var popup_shadow = document.getElementById('popup_shadow');//遮罩
var siteList = document.getElementById('siteList');//地址列表容器
// 錄入地區列表
var siteJson = {
"site1": [
{
initial: "B",
address: ["北京市"]
},
{
initial: "C",
address: ["重慶市", "成都市"]
},
{
initial: "G",
address: ["廣東"]
},
{
initial: "H",
address: ["河北", "河南", "黑龍江", "湖南"]
},
{
initial: "J",
address: ["吉林", "江蘇"]
},
{
initial: "L",
address: ["遼寧"]
}
],
"site2": [
{
initial: "N",
address: ["南京市"]
},
{
initial: "S",
address: ["上海市", "四川", "山西"]
},
{
initial: "T",
address: ["天津市"]
},
{
initial: "W",
address: ["武漢"]
},
{
initial: "X",
address: ["西安市"]
},
{
initial: "Z",
address: ["浙江"]
}
],
// 固定地區連接
"site_href": [
'http://chengdu.xuefu.com',
'http://nanjing.xuefu.com',
'http://wuhan.xuefu.com',
'http://xian.xuefu.com',
'http://chengdu.xuefu.com',//因爲四川和成都屬於同一連接
'http://nanjing.xuefu.com'//江蘇同上
],
//固定5地區
"fixed_region": ['成都市', '南京市', '武漢市', '西安市', '四川省','江蘇省']
}
for (var i = 0; i < 2; i++) {
var POP_UP = document.createElement('ul');
siteList.append(POP_UP);
}
siteList.childNodes[1].setAttribute('id', 'site1');//爲建立的ul設置屬性id
siteList.childNodes[2].setAttribute('id', 'site2');
var site1_id = document.getElementById('site1');//地址左欄
var site2_id = document.getElementById('site2');//地址右欄
// 循環siteJson數據建立標籤塞數據
site1.inerHTML = '' || null;//優先清空地址列表
site1.inerHTML = '' || null;
var site1_id_el1 = site1.getElementsByTagName('li');//獲得ul下全部li
var site2_id_el2 = site2.getElementsByTagName('li');
var siteList_child_a = siteList.getElementsByTagName('a');//獲得全部地區
addSite(siteJson.site1, site1_id_el1, site1_id);
addSite(siteJson.site2, site2_id_el2, site2_id);
function addSite(x, z, y) {
for (var i = 0; i < x.length; i++) {
y.innerHTML += '<li><i>' + x[i].initial + '</i>' + '<li>';//循環給ul塞入li及i(字母)
for (var n = 0; n < z.length; n++) {
if (z[n].innerHTML === "") {
z[n].remove();//移除無內容的li元素
}
}
for (var m = 0; m < x[i].address.length; m++) {
switch (m) {
case m: {//判斷循環建立a元素且塞對應內容
var el_a = document.createElement('a');
el_a.innerHTML = x[i].address[m];
z[i].append(el_a);
};
break;
}
}
}
}
var site_location = {
// 設置五個地區href
add_href: function () {
var el_a_href = siteJson.site_href;
site1.childNodes[1].childNodes[2].href = el_a_href[0];
site1.childNodes[4].childNodes[2].href = el_a_href[1];
site2.childNodes[0].childNodes[1].href = el_a_href[1];
site2.childNodes[1].childNodes[2].href = el_a_href[0];
site2.childNodes[3].childNodes[1].href = el_a_href[2];
site2.childNodes[4].childNodes[1].href = el_a_href[3];
},
// 實時監測獲取地理位置
locations: function () {
function locationResult(result) {
var city_Name = result.name;
LOCATION_ADDRESS.innerText = city_Name;
}
var myCity = new BMap.LocalCity();//調用百度api
myCity.get(locationResult);
},
// 判斷地區並塞入對應地區連接
opinions: function () {
// 兼容dom2事件
eventUntil = {
readyEvent: function (fn) {
if (fn == null) {
fn = document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function () {
oldonload();
fn();
};
}
},
addEvent: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function () {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 取消事件的默認行爲
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();// 標準w3c
} else {
event.returnValue = false;// IE
}
},
// 獲取事件目標
getTarget: function (event) {
// 標準W3C 和 IE
return event.target || event.srcElement;
},
// 獲取event對象的引用，取到事件的全部信息，確保隨時能使用event；
getEvent: function (e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};
// 調用監聽---地址
eventUntil.addEvent(JUMP_IN, "click", jump_if);
function jump_if() {
var loaction_text = LOCATION_ADDRESS.innerHTML;
var address_target = siteJson.fixed_region;//獲得固定地區準備循環判斷
for (var r = 0; r < address_target.length; r++) {
console.log(address_target[r]); // 成都 南京 武漢 西安 四川
if (loaction_text !== address_target[r]) {//若是定位的地址在固定的地區沒有的話，將所有默認爲北京地址，並取消彈窗和遮罩
shadow_none();//調用隱藏遮&彈窗
} else if (loaction_text == address_target[r]) {//若是定位的地址在固定的地區有的話，將跳往對應地區
switch (r) {
case r: window.open(siteJson.site_href[r]); break;
}
} else {
shadow_none();
}
}
}
},
address_addHref: function () {
for (var u = 0; u < siteList_child_a.length; u++) {
siteList_child_a[u].title = siteList_child_a[u].innerHTML;
siteList_child_a[u].onclick = function () {
if (!this.hasAttribute('href')) {
shadow_none();
}
}
}
}
}
function shadow_none() {
popup_shadow.className = 'dis_none';
pop_up.className = 'dis_none';
}
site_location.add_href();//添加連接
site_location.locations();//定位
site_location.opinions();//判斷地區跳轉連接
site_location.address_addHref();//給每一個地區塞入對應連接
</script>
</body>
</html>
複製代碼
相關文章
- 1. 靜態地址重定位 與 動態地址重定位
- 2. 地址重定位：靜態重定位和動態重定位
- 3. DHCP動態配置ip地址和指定ip地址
- 4. 【轉】地址重定位：靜態重定位和動態重定位
- 5. 關於地址重定位
- 6. [OS] 地址重定位
- 7. Thinkphp的Ip地址定位
- 8. ios 地圖定位獲取地址
- 9. 高德地圖 自動定位+拖拽選址 +搜索選址
- 10. NAT動態地址轉換
- 更多相關文章...
- • 物理地址（MAC地址）是什麼？ - TCP/IP教程
- • IP地址是什麼？ - TCP/IP教程
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安裝
- 2. Linux下Redis安裝及集羣搭建
- 3. shiny搭建網站填坑戰略
- 4. Mysql8.0.22安裝與配置詳細教程
- 5. Hadoop安裝及配置
- 6. Python爬蟲初學筆記
- 7. 部署LVS-Keepalived高可用集羣
- 8. keepalived+mysql高可用集羣
- 9. jenkins 公鑰配置
- 10. HA實用詳解
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 靜態地址重定位 與 動態地址重定位
- 2. 地址重定位：靜態重定位和動態重定位
- 3. DHCP動態配置ip地址和指定ip地址
- 4. 【轉】地址重定位：靜態重定位和動態重定位
- 5. 關於地址重定位
- 6. [OS] 地址重定位
- 7. Thinkphp的Ip地址定位
- 8. ios 地圖定位獲取地址
- 9. 高德地圖 自動定位+拖拽選址 +搜索選址
- 10. NAT動態地址轉換