前端随笔三

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
</head>
<body>
<ul id="source">
<li>北京空气质量：90</li>
<li>上海空气质量：70</li>
<li>天津空气质量：80</li>
<li>广州空气质量：50</li>
<li>深圳空气质量：40</li>
<li>福州空气质量：32</li>
<li>成都空气质量：90</li>
</ul>
<ul id="resort">

</ul>
<button id="sort-btn">排序</button>
<script type="text/javascript">
/**
* getData方法
* 读取id为source的列表，获取其中城市名字及城市对应的空气质量
* 返回一个数组，格式见函数中示例
*/
function getData() {
/*
coding here
*/
// var city = document.getElementById("source").children;
var city = document.querySelectorAll('#source>li');
// 核心的api
var data = [];
for (var i = 0; i < city.length; i++) {
var text = city[i].innerText;
var node = [text.substr(0, 2), text.substr(-2, 2)];
// 获取相应的数据核心的api substr
data.push(node);
}
return data;
/*
data = [
["北京", 90],
["北京", 90]
……
]
*/
}
/**
* sortAqiData
* 按空气质量对data进行从小到大的排序
* 返回一个排序后的数组
*/
function sortAqiData(data) {
data.sort(function(a, b) {
return a[1] - b[1];
});
return data;
}
/**
* render
* 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
* 格式见ul中的注释的部分
*/
function render(data) {
var arr = ["一","二","三","四","五","六","七"];
var resort = document.getElementById("resort");
for (var i = 0; i < data.length; i++) {
var liText = '第' + arr[i] + '名' + data[i][0] + "," + '空气质量：';
// console.log(liText);
var oLi = document.createElement('li');
var oB = document.createElement('b');
oLi.innerText = liText;
oB.innerText = data[i][1];
oLi.appendChild(oB);
resort.appendChild(oLi);
}
}
function btnHandle() {
var aqiData = getData();
aqiData = sortAqiData(aqiData);
render(aqiData);
}
function init() {
var sort = false;
var btn = document.getElementById('sort-btn');
btn.onclick = function() {
if (!sort)
btnHandle();
sort = true;
}
// 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数
}
init();
</script>
</body>

</html>

对功能实现思路的实现解析

首先获取到数组对数组中的元素进行处理并将其封装为相应的数组

对上面的数组进行二次加工

最后将所有的方法定义在一个方法里面

通过init（）将事件绑定再去调用上一步中的集合方法

猜你喜欢