任务地址:http://ife.baidu.com/course/detail/id/98

代码:

 <!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 aLi = document.getElementsByTagName('li');
var data = [];
for( var i=0;i<aLi.length;i++ ) {
var text = aLi[i].innerText;
var node = [ text.slice(0,2),text.slice(-2) ];
data.push(node);
}
return data;
} /**
* sortAqiData
* 按空气质量对data进行从小到大的排序
* 返回一个排序后的数组
*/
function sortAqiData(data) {
data.sort(function( a1,a2 ) {
return a2[1] - a1[1];
});
return data;
} /**
* render
* 将排好序的城市及空气质量指数,输出显示到id位resort的列表中
* 格式见ul中的注释的部分
*/
function render(data) {
var oUl = document.getElementById('resort');
for( var i=0;i<data.length;i++ ) {
var aLi = document.createElement('li');
var oB = document.createElement('b');
aLi.innerHTML = '第' + (i+1) + '名 :' + data[i][0] + ',空气污染指数是: ';
oB.innerHTML = data[i][1];
oUl.appendChild(aLi);
aLi.appendChild(oB); }
} function btnHandle() {
var aqiData = getData();
aqiData = sortAqiData(aqiData);
render(aqiData);
} function init() {
// 在这下面给sort-btn绑定一个点击事件,点击时触发btnHandle函数
var btn = document.getElementById('sort-btn');
btn.onclick = function() {
btnHandle();
};
} init(); </script>
</body>
</html>

说明:

 function getData() {     var aLi = document.getElementsByTagName('li');
var data = [];
for( var i=0;i<aLi.length;i++ ) {
var text = aLi[i].innerText;
var node = [ text.slice(0,2),text.slice(-2) ];
data.push(node);
}
return data;
}

  用slice()方法获取地区和雾霾指数

 function sortAqiData(data) {
data.sort(function( a1,a2 ) {
return a2[1] - a1[1];
});
return data;
}

  sort()方法中塞入比较函数

  根据数组中的雾霾指数进行排序

 function render(data) {
var oUl = document.getElementById('resort');
for( var i=0;i<data.length;i++ ) {
var aLi = document.createElement('li');
var oB = document.createElement('b');
aLi.innerHTML = '第' + (i+1) + '名 :' + data[i][0] + ',空气污染指数是: ';
oB.innerHTML = data[i][1];
oUl.appendChild(aLi);
aLi.appendChild(oB); }
}

  依次写出数组,并追加元素

05-07 15:50
查看更多