<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>city修改版</title>
<style>
#city {
display: none;
}
#city li {
overflow: hidden;
list-style: none;
200px;
height: 20px;
line-height: 20px;
}
#city li span {
float: right;
}
.bgColor {
background-color: orange;
}
</style>
<script src="../common.js"></script>
<script>
/*
* [{"name": "北京","id": 110100,"hot": true},{"name": "上海","id": 310000,"hot": true},{"name": "南京市","id": 320100},{"name": "广州","id": 440100,"hot": true},{"name": "深圳","id": 440300,"hot": true},{"name": "成都","id": 510100},{"name": "杭州","id": 330100},{"name": "南宁","id": 450100},{"name": "大连","id": 210200}];
* 根据数据生成城市列表,热门城市显示高亮效果
* 输入框聚焦的时候显示城市列表
* 输入框失去焦点的时候隐藏城市列表
* 点击城市列表时,把对应的城市名字写入输入框,并提示选择的城市
* 刷新页面显示上次选择的城市,并保留7天;
*/
window.onload = function() {
var str = [{
"name": "北京",
"id": 110100,
"hot": true
}, {
"name": "上海",
"id": 310000,
"hot": true
}, {
"name": "南京市",
"id": 320100
}, {
"name": "广州",
"id": 440100,
"hot": true
}, {
"name": "深圳",
"id": 440300,
"hot": true
}, {
"name": "成都",
"id": 510100
}, {
"name": "杭州",
"id": 330100
}, {
"name": "南宁",
"id": 450100
}, {
"name": "大连",
"id": 210200
}];
//获取页面元素
var city = getId('city');
var input = getId('input');
var output = input.nextElementSibling;
//根据数据生成城市列表,热门城市显示高亮效果
var len = str.length;
//遍历str,每个元素是一个对象,包含属性'name' 'id';还有部分元素存在属性'hot'
for (var i = 0; i < len; i++) {
//创建li,span,i三种节点
var li = crtDom('li');
var Id = crtDom('i');
var span = crtDom('span');
//添加innerHTML
Id.innerHTML = str[i].name;
span.innerHTML = str[i].id;
//判断'hot'
if (str[i].hot) {
li.setAttribute('data-hot', str[i].hot);
li.className = 'bgColor';
}
//把创建的节点加到city列表里面;
li.appendChild(Id);
li.appendChild(span);
city.appendChild(li);
}
//输入框聚焦的时候显示城市列表
//即输入框点击事件
function block() {
city.style.display = 'block';
}
//使用监听事件格式
input.addEventListener('click', block);
//输入框失去焦点的时候隐藏城市列表
//onblur事件,由于需要点击城市列表,用延时器使列表存在页面时可以使用点击事件
function none() {
setTimeout(function() {
city.style.display = '';
}, 500);
}
//使用监听事件格式
input.addEventListener('blur', none);
//点击城市列表时,把对应的城市名字写入输入框,并提示选择的城市
//为了减少绑定事件,利用冒泡机制
function btnCity(e) {
//兼容尽量不要少,利于维护
e = e || window.event;
var target = e.target || e.srcElement;
//获取当前事件源所在的li的i包裹的内容
//遍历city列表的子元素
var len = city.children.length;
for (var i = 0; i < len; i++) {
//判断事件源是否是当前的li 或者 i;
if (target === city.children[i].firstChild || target === city.children[i]) {
//获取每个li的i包裹的内容
var _text = city.children[i].firstChild.innerHTML;
//未调测之前可以在关键地方先留下控制台打印的代码
console.log(_text);
//把获取的内容写入输入框,
input.value = _text;
//并提示选择的城市;
output.innerHTML = '你选择了:' + _text;
//刷新页面显示上次选择的城市,并保留7天;
//这里需要保存内容
setCookie('input', input.value, sevenDay());
setCookie('output', output.innerHTML, sevenDay());
}
}
}
//使用监听事件格式
city.addEventListener('click', btnCity);
//刷新页面显示上次选择的城市,并保留7天;
//7天的有效时间
function sevenDay() {
var now = new Date();
now.setDate(now.getDate() + 7);
return now;
}
//刷新页面获取cookie:
//判断当前cookie是否为空
if(getCookie('input') != '' && getCookie('output') != ''){
input.value = getCookie('input');
output.innerHTML = getCookie('output');
}
}
</script>
</head>
<body>
<p>
<input type="text" id="input" /><span></span>
</p>
<ul id="city"></ul>
</body>
</html>