任务描述
参考以下示例代码，读取页面上已有的source列表，从中提取出城市以及对应的空气质量
将数据按照某种顺序排序后，在resort列表中按照顺序显示出来
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
</head>
<body>
<ul id="source">
<li>北京空气质量：<b>90</b></li>
<li>上海空气质量：<b>70</b></li>
<li>天津空气质量：<b>80</b></li>
<li>广州空气质量：<b>50</b></li>
<li>深圳空气质量：<b>40</b></li>
<li>福州空气质量：<b>32</b></li>
<li>成都空气质量：<b>90</b></li>
</ul>
<ul id="resort">
<!--
<li>第一名：北京空气质量：<b>90</b></li>
<li>第二名：北京空气质量：<b>90</b></li>
<li>第三名：北京空气质量：<b>90</b></li>
-->
</ul>
<button id="sort-btn">排序</button>
<script type="text/javascript">
/**
* getData方法
* 读取id为source的列表，获取其中城市名字及城市对应的空气质量
* 返回一个数组，格式见函数中示例
*/
function getData() {
/*
coding here
*/
/*
data = [
["北京", 90],
["北京", 90]
……
]
*/
//定义一个空数组
var data = [];
//获取ul的li元素子节点
var lis = document.getElementById("source").childNodes;
//循环遍历ul的子节点将相应的值赋值给data数组
for(var i=0;i<lis.length;i++) {
//由于浏览器兼容问题，需要去除空节点
if(lis[i].innerHTML != undefined) {
//获取城市
var city = lis[i].innerHTML.substring(0,2);
//获取空气污染指数
var num = lis[i].childNodes[1].innerHTML;
//将城市名字及城市对应的空气质量加入数组
data.push([city,num]);
}
}
return data;
}
/**
* sortAqiData
* 按空气质量对data进行从小到大的排序
* 返回一个排序后的数组
*/
function sortAqiData(data) {
return data.sort(function(x,y) {
return y[1] - x[1];
})
}
/**
* render
* 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
* 格式见ul中的注释的部分
*/
function render(data) {
//空气质量指数排名
var chineseRank=['一','二','三','四','五','六','七','八','九','十'];
for(var i=0;i < data.length;i++) {
var li=document.createElement("li");
li.innerHTML = "第"+chineseRank[i]+"名："+data[i][0]+"空气质量：";
var b=document.createElement("b");
b.innerHTML = data[i][1];
li.appendChild(b);
var element=document.getElementById("resort");
element.appendChild(li);
}
}
function btnHandle() {
var aqiData = getData();
aqiData = sortAqiData(aqiData);
render(aqiData);
}
function init() {
// 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数
document.getElementById("sort-btn").onclick = function() {
btnHandle();
}
}
init();
</script>
</body>
</html>