<!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:
</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>
